@gitlab/ui 94.1.1 → 94.2.0

package/src/components/base/token/token.scss

@@ -1,6 +1,6 @@
 .gl-token {
-  @apply gl-text-gray-900;
-  @apply gl-bg-gray-100;
+  color: var(--gl-token-foreground-color);
+  background-color: var(--gl-token-background-color);
   @apply gl-rounded-small;
   @apply gl-pl-3;
   @apply gl-inline-flex;
@@ -14,7 +14,7 @@
 }
 
 .gl-token-search-type-variant {
-  @apply gl-bg-gray-100;
+  background-color: var(--gl-token-background-color);
   @apply gl-rounded-tr-none;
   @apply gl-rounded-br-none;
 }
@@ -39,20 +39,6 @@
 
 .gl-token-close {
   @apply gl-ml-2;
-  @apply gl-text-inherit;
-  @include gl-cursor-pointer;
-
-  opacity: 0.8;
   color: inherit !important;
   background-color: transparent !important;
-
-  &:hover,
-  &:focus {
-    @include gl-opacity-10;
-  }
-
-  &:focus,
-  &:hover:focus {
-    @include gl-focus($important: true);
-  }
 }

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

@@ -497,6 +497,7 @@
   --gl-control-background-color-concatenation: var(--gl-color-neutral-10); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-disabled: var(--gl-color-neutral-10); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-neutral-0); /* Used for form control (input, radio button, checkbox, textarea) default background. */
+  --gl-token-background-color: var(--gl-color-neutral-100); /* Used for the token background color. */
   --gl-tab-selected-indicator-color-default: var(--gl-color-blue-500); /* Used for the selected indicator of a tab. */
   --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner on a dark background. */
   --gl-spinner-segment-color-default: var(--gl-color-neutral-700); /* Used for the animated segment of a loading spinner. */
@@ -520,6 +521,12 @@
   --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. */
   --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-text-color: var(--gl-color-neutral-950); /* Used for the label text color on a light background color. */
+  --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-default: var(--gl-color-neutral-50); /* Used for the filtered search operator 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-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-type-background-color-hover: var(--gl-color-neutral-100); /* Used for the filtered search type token background color in the hover state. */
+  --gl-filtered-search-token-type-background-color-default: var(--gl-color-neutral-50); /* Used for the filtered search type token background color in the default state. */
   --gl-datepicker-background-color: var(--gl-color-neutral-0); /* Used for the background color of datepicker. */
   --gl-button-disabled-border-color: var(--gl-color-neutral-100); /* Used for the border of a disabled button. */
   --gl-button-disabled-background-color: var(--gl-color-neutral-10); /* Used for the background of a disabled button. */
@@ -762,6 +769,7 @@
   --gl-control-placeholder-color: var(--gl-text-color-disabled); /* Used for placeholder text within inputs. */
   --gl-control-text-color-valid: var(--gl-text-color-success); /* Used for the helper text when the input is valid. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /* Used for the helper text when the input is invalid. */
+  --gl-token-foreground-color: var(--gl-text-color-default); /* Used for the token foreground color. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
   --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /* Used for the datepicker date text color state indicators. */

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

@@ -497,6 +497,7 @@
   --gl-control-background-color-concatenation: var(--gl-color-alpha-light-4); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-disabled: var(--gl-color-alpha-light-4); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-alpha-dark-40); /* Used for form control (input, radio button, checkbox, textarea) default background. */
+  --gl-token-background-color: var(--gl-color-neutral-800); /* Used for the token background color. */
   --gl-tab-selected-indicator-color-default: var(--gl-color-blue-400); /* Used for the selected indicator of a tab. */
   --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner on a dark background. */
   --gl-spinner-segment-color-default: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner. */
@@ -520,6 +521,12 @@
   --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. */
   --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-text-color: var(--gl-color-neutral-950); /* Used for the label text color on a light background color. */
+  --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-default: var(--gl-color-neutral-900); /* Used for the filtered search operator 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-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-type-background-color-hover: var(--gl-color-neutral-800); /* Used for the filtered search type token background color in the hover state. */
+  --gl-filtered-search-token-type-background-color-default: var(--gl-color-neutral-900); /* Used for the filtered search type token background color in the default state. */
   --gl-datepicker-background-color: var(--gl-color-neutral-900); /* Used for the background color of datepicker. */
   --gl-button-disabled-border-color: var(--gl-color-neutral-800); /* Used for the border of a disabled button. */
   --gl-button-disabled-background-color: var(--gl-color-neutral-950); /* Used for the background of a disabled button. */
@@ -762,6 +769,7 @@
   --gl-control-placeholder-color: var(--gl-text-color-disabled); /* Used for placeholder text within inputs. */
   --gl-control-text-color-valid: var(--gl-text-color-success); /* Used for the helper text when the input is valid. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /* Used for the helper text when the input is invalid. */
+  --gl-token-foreground-color: var(--gl-text-color-default); /* Used for the token foreground color. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
   --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /* Used for the datepicker date text color state indicators. */

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

@@ -627,6 +627,12 @@ export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = '#18171d'; // Used for the ba
 export const GL_BUTTON_DISABLED_BORDER_COLOR = '#3a383f'; // Used for the border of a disabled button.
 export const GL_DATEPICKER_BACKGROUND_COLOR = '#28272d'; // Used for the background color of datepicker.
 export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#18171d'; // Used for the datepicker date text color state indicators.
+export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the filtered search type token background color in the default state.
+export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#3a383f'; // Used for the filtered search type token background color in the hover state.
+export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#3a383f'; // Used for the filtered search data background color in the default state.
+export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_HOVER = '#4c4b51'; // Used for the filtered search data token background color in the hover state.
+export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the filtered search operator background color in the default state.
+export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#4c4b51'; // Used for the filtered search operator token background color in the hover state.
 export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d'; // Used for the label text color on a light background color.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a light background color in the default state.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the label remove button background on a light background color in the hover state.
@@ -652,6 +658,8 @@ export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3'; // Used for the animate
 export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#28272d'; // Used for the background of a table row in hover state.
 export const GL_TABLE_SORTING_ICON_COLOR = '#fff'; // Used for the color of the sorting icons in the column headers.
 export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#428fdc'; // Used for the selected indicator of a tab.
+export const GL_TOKEN_FOREGROUND_COLOR = '#ececef'; // Used for the token foreground color.
+export const GL_TOKEN_BACKGROUND_COLOR = '#3a383f'; // Used for the token background color.
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = 'rgba(255, 255, 255, 0.04)'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = 'rgba(255, 255, 255, 0.04)'; // Used for the background of static content that prepends or appends a text input.

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

@@ -627,6 +627,12 @@ export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = '#fbfafd'; // Used for the ba
 export const GL_BUTTON_DISABLED_BORDER_COLOR = '#dcdcde'; // Used for the border of a disabled button.
 export const GL_DATEPICKER_BACKGROUND_COLOR = '#fff'; // Used for the background color of datepicker.
 export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#fff'; // Used for the datepicker date text color state indicators.
+export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT = '#ececef'; // Used for the filtered search type token background color in the default state.
+export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#dcdcde'; // Used for the filtered search type token background color in the hover state.
+export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#dcdcde'; // Used for the filtered search data background color in the default state.
+export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_HOVER = '#bfbfc3'; // Used for the filtered search data token background color in the hover state.
+export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_DEFAULT = '#ececef'; // Used for the filtered search operator background color in the default state.
+export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#bfbfc3'; // Used for the filtered search operator token background color in the hover state.
 export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d'; // Used for the label text color on a light background color.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a light background color in the default state.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the label remove button background on a light background color in the hover state.
@@ -652,6 +658,8 @@ export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3'; // Used for the animate
 export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#fbfafd'; // Used for the background of a table row in hover state.
 export const GL_TABLE_SORTING_ICON_COLOR = '#18171d'; // Used for the color of the sorting icons in the column headers.
 export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#1f75cb'; // Used for the selected indicator of a tab.
+export const GL_TOKEN_FOREGROUND_COLOR = '#3a383f'; // Used for the token foreground color.
+export const GL_TOKEN_BACKGROUND_COLOR = '#dcdcde'; // Used for the token background color.
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.

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

@@ -13739,6 +13739,178 @@
       }
     }
   },
+  "filtered-search": {
+    "token": {
+      "type": {
+        "background": {
+          "color": {
+            "default": {
+              "value": "#28272d",
+              "$type": "color",
+              "comment": "Used for the filtered search type token background color in the default state.",
+              "filePath": "src/tokens/contextual/filtered-search.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.50}",
+                  "dark": "{color.neutral.900}"
+                },
+                "$type": "color",
+                "comment": "Used for the filtered search type token background color in the default state."
+              },
+              "name": "FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "filtered-search",
+                "token",
+                "type",
+                "background",
+                "color",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#3a383f",
+              "$type": "color",
+              "comment": "Used for the filtered search type token background color in the hover state.",
+              "filePath": "src/tokens/contextual/filtered-search.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.100}",
+                  "dark": "{color.neutral.800}"
+                },
+                "$type": "color",
+                "comment": "Used for the filtered search type token background color in the hover state."
+              },
+              "name": "FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "filtered-search",
+                "token",
+                "type",
+                "background",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        }
+      },
+      "data": {
+        "background": {
+          "color": {
+            "default": {
+              "value": "#3a383f",
+              "$type": "color",
+              "comment": "Used for the filtered search data background color in the default state.",
+              "filePath": "src/tokens/contextual/filtered-search.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.100}",
+                  "dark": "{color.neutral.800}"
+                },
+                "$type": "color",
+                "comment": "Used for the filtered search data background color in the default state."
+              },
+              "name": "FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "filtered-search",
+                "token",
+                "data",
+                "background",
+                "color",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#4c4b51",
+              "$type": "color",
+              "comment": "Used for the filtered search data 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}"
+                },
+                "$type": "color",
+                "comment": "Used for the filtered search data token background color in the hover state."
+              },
+              "name": "FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "filtered-search",
+                "token",
+                "data",
+                "background",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        }
+      },
+      "operator": {
+        "background": {
+          "color": {
+            "default": {
+              "value": "#28272d",
+              "$type": "color",
+              "comment": "Used for the filtered search operator background color in the default state.",
+              "filePath": "src/tokens/contextual/filtered-search.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.50}",
+                  "dark": "{color.neutral.900}"
+                },
+                "$type": "color",
+                "comment": "Used for the filtered search operator background color in the default state."
+              },
+              "name": "FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "filtered-search",
+                "token",
+                "operator",
+                "background",
+                "color",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#4c4b51",
+              "$type": "color",
+              "comment": "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}"
+                },
+                "$type": "color",
+                "comment": "Used for the filtered search operator token background color in the hover state."
+              },
+              "name": "FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "filtered-search",
+                "token",
+                "operator",
+                "background",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        }
+      }
+    }
+  },
   "label": {
     "light": {
       "text": {
@@ -14392,6 +14564,53 @@
       }
     }
   },
+  "token": {
+    "foreground": {
+      "color": {
+        "value": "#ececef",
+        "$type": "color",
+        "comment": "Used for the token foreground color.",
+        "filePath": "src/tokens/contextual/token.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{text.color.default}",
+          "$type": "color",
+          "comment": "Used for the token foreground color."
+        },
+        "name": "TOKEN_FOREGROUND_COLOR",
+        "attributes": {},
+        "path": [
+          "token",
+          "foreground",
+          "color"
+        ]
+      }
+    },
+    "background": {
+      "color": {
+        "value": "#3a383f",
+        "$type": "color",
+        "comment": "Used for the token background color.",
+        "filePath": "src/tokens/contextual/token.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.100}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "comment": "Used for the token background color."
+        },
+        "name": "TOKEN_BACKGROUND_COLOR",
+        "attributes": {},
+        "path": [
+          "token",
+          "background",
+          "color"
+        ]
+      }
+    }
+  },
   "control": {
     "background": {
       "color": {

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

@@ -13739,6 +13739,178 @@
       }
     }
   },
+  "filtered-search": {
+    "token": {
+      "type": {
+        "background": {
+          "color": {
+            "default": {
+              "value": "#ececef",
+              "$type": "color",
+              "comment": "Used for the filtered search type token background color in the default state.",
+              "filePath": "src/tokens/contextual/filtered-search.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.50}",
+                  "dark": "{color.neutral.900}"
+                },
+                "$type": "color",
+                "comment": "Used for the filtered search type token background color in the default state."
+              },
+              "name": "FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "filtered-search",
+                "token",
+                "type",
+                "background",
+                "color",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#dcdcde",
+              "$type": "color",
+              "comment": "Used for the filtered search type token background color in the hover state.",
+              "filePath": "src/tokens/contextual/filtered-search.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.100}",
+                  "dark": "{color.neutral.800}"
+                },
+                "$type": "color",
+                "comment": "Used for the filtered search type token background color in the hover state."
+              },
+              "name": "FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "filtered-search",
+                "token",
+                "type",
+                "background",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        }
+      },
+      "data": {
+        "background": {
+          "color": {
+            "default": {
+              "value": "#dcdcde",
+              "$type": "color",
+              "comment": "Used for the filtered search data background color in the default state.",
+              "filePath": "src/tokens/contextual/filtered-search.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.100}",
+                  "dark": "{color.neutral.800}"
+                },
+                "$type": "color",
+                "comment": "Used for the filtered search data background color in the default state."
+              },
+              "name": "FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "filtered-search",
+                "token",
+                "data",
+                "background",
+                "color",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#bfbfc3",
+              "$type": "color",
+              "comment": "Used for the filtered search data 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}"
+                },
+                "$type": "color",
+                "comment": "Used for the filtered search data token background color in the hover state."
+              },
+              "name": "FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "filtered-search",
+                "token",
+                "data",
+                "background",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        }
+      },
+      "operator": {
+        "background": {
+          "color": {
+            "default": {
+              "value": "#ececef",
+              "$type": "color",
+              "comment": "Used for the filtered search operator background color in the default state.",
+              "filePath": "src/tokens/contextual/filtered-search.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.50}",
+                  "dark": "{color.neutral.900}"
+                },
+                "$type": "color",
+                "comment": "Used for the filtered search operator background color in the default state."
+              },
+              "name": "FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "filtered-search",
+                "token",
+                "operator",
+                "background",
+                "color",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#bfbfc3",
+              "$type": "color",
+              "comment": "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}"
+                },
+                "$type": "color",
+                "comment": "Used for the filtered search operator token background color in the hover state."
+              },
+              "name": "FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "filtered-search",
+                "token",
+                "operator",
+                "background",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        }
+      }
+    }
+  },
   "label": {
     "light": {
       "text": {
@@ -14392,6 +14564,53 @@
       }
     }
   },
+  "token": {
+    "foreground": {
+      "color": {
+        "value": "#3a383f",
+        "$type": "color",
+        "comment": "Used for the token foreground color.",
+        "filePath": "src/tokens/contextual/token.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{text.color.default}",
+          "$type": "color",
+          "comment": "Used for the token foreground color."
+        },
+        "name": "TOKEN_FOREGROUND_COLOR",
+        "attributes": {},
+        "path": [
+          "token",
+          "foreground",
+          "color"
+        ]
+      }
+    },
+    "background": {
+      "color": {
+        "value": "#dcdcde",
+        "$type": "color",
+        "comment": "Used for the token background color.",
+        "filePath": "src/tokens/contextual/token.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.100}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "comment": "Used for the token background color."
+        },
+        "name": "TOKEN_BACKGROUND_COLOR",
+        "attributes": {},
+        "path": [
+          "token",
+          "background",
+          "color"
+        ]
+      }
+    }
+  },
   "control": {
     "background": {
       "color": {

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

@@ -495,6 +495,7 @@ $gl-control-background-color-readonly: $gl-color-alpha-light-8; // Used for the
 $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-disabled: $gl-color-alpha-light-4; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.
+$gl-token-background-color: $gl-color-neutral-800; // Used for the token background color.
 $gl-tab-selected-indicator-color-default: $gl-color-blue-400; // Used for the selected indicator of a tab.
 $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
 $gl-spinner-segment-color-default: $gl-color-neutral-200; // Used for the animated segment of a loading spinner.
@@ -518,6 +519,12 @@ $gl-label-light-button-icon-color-default: $gl-color-neutral-950; // Used for th
 $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.
 $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-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
+$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-default: $gl-color-neutral-900; // Used for the filtered search operator 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-data-background-color-default: $gl-color-neutral-800; // Used for the filtered search data background color in the default state.
+$gl-filtered-search-token-type-background-color-hover: $gl-color-neutral-800; // Used for the filtered search type token background color in the hover state.
+$gl-filtered-search-token-type-background-color-default: $gl-color-neutral-900; // Used for the filtered search type token background color in the default state.
 $gl-datepicker-background-color: $gl-color-neutral-900; // Used for the background color of datepicker.
 $gl-button-disabled-border-color: $gl-color-neutral-800; // Used for the border of a disabled button.
 $gl-button-disabled-background-color: $gl-color-neutral-950; // Used for the background of a disabled button.
@@ -760,6 +767,7 @@ $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner
 $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
+$gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.