@gitlab/ui 94.1.0 → 94.2.0

package/src/components/base/button/button.scss

@@ -92,7 +92,7 @@
   }
 
   .gl-button-text {
-    @include gl-overflow-hidden;
+    @apply gl-overflow-hidden;
     @apply gl-text-ellipsis;
     @apply gl-whitespace-nowrap;
     // Added to address a FF bug which causes cut off text: https://bugzilla.mozilla.org/show_bug.cgi?id=1406552
@@ -322,7 +322,7 @@
       &:active,
       &:focus,
       &:focus:active {
-        @include gl-focus;
+        @apply gl-focus;
       }
     }
   }
@@ -498,7 +498,7 @@
     &:focus,
     &:focus:active {
       @apply gl-bg-transparent;
-      @include gl-focus;
+      @apply gl-focus;
     }
 
     &.disabled,

package/src/components/base/drawer/drawer.scss

@@ -13,7 +13,7 @@ $gl-drawer-scrim-gradient: linear-gradient(
   position: fixed;
   @apply gl-h-full;
   @apply gl-w-full;
-  @include gl-overflow-y-auto;
+  @apply gl-overflow-y-auto;
   @include gl-shadow-lg;
   @apply gl-text-base;
   @apply gl-leading-normal;

package/src/components/base/dropdown/dropdown.scss

@@ -133,7 +133,7 @@
 
   .gl-dropdown-button-text {
     @include gl-mr-auto;
-    @include gl-overflow-hidden;
+    @apply gl-overflow-hidden;
     @apply gl-text-ellipsis;
   }
 

package/src/components/base/dropdown/dropdown_divider.scss

@@ -1,5 +1,5 @@
 @mixin gl-tmp-dropdown-divider-style {
-  @include gl-overflow-hidden;
+  @apply gl-overflow-hidden;
   @apply gl-h-0;
   @apply gl-my-2;
   @apply gl-mx-0;

package/src/components/base/filtered_search/filtered_search.scss

@@ -1,29 +1,29 @@
 .gl-filtered-search-scrollable-container {
-  @apply gl-bg-white;
   @apply gl-flex;
   @apply gl-grow;
   @apply gl-basis-0;
-  @include gl-overflow-hidden;
+  @apply gl-overflow-hidden;
   @apply gl-items-center;
   @apply gl-py-2;
   @apply gl-pl-4;
   @apply gl-pr-7;
-  @apply gl-shadow-inner-1-gray-400;
   @apply gl-border-none;
   @apply gl-rounded-base;
+  box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-default);
+  background-color: var(--gl-control-background-color-default);
 
   .input-group-prepend + & {
-    @include gl-rounded-left-none;
+    @apply gl-rounded-l-none;
   }
 }
 
 .gl-filtered-search-scrollable-container-with-search-button {
-  @include gl-rounded-right-none;
+  @apply gl-rounded-r-none;
 }
 
 .gl-filtered-search-scrollable {
   @apply gl-flex;
-  @include gl-overflow-y-auto;
+  @apply gl-overflow-y-auto;
   @apply gl-w-full;
 }
 

package/src/components/base/filtered_search/filtered_search_suggestion_list.scss

@@ -6,13 +6,13 @@
   width: $gl-dropdown-width;
   @apply gl-p-2;
   @apply gl-border-gray-200;
-  @include gl-rounded-lg;
+  @apply gl-rounded-lg;
   @include gl-shadow-md;
 }
 
 .gl-filtered-search-suggestion-list {
   position: absolute;
-  @include gl-overflow-y-auto;
+  @apply gl-overflow-y-auto;
   max-height: $gl-max-dropdown-max-height;
 
   .gl-filtered-search-suggestion,

package/src/components/base/filtered_search/filtered_search_term.scss

@@ -6,6 +6,7 @@
 
 .gl-filtered-search-term-input {
   @apply gl-p-0;
+  @apply gl-bg-transparent;
   @apply gl-border-none;
   @include gl-outline-none;
   @apply gl-h-6;

package/src/components/base/filtered_search/filtered_search_token.scss

@@ -11,12 +11,15 @@
   &.gl-filtered-search-token-hover {
     &:hover {
       .gl-filtered-search-token-type {
-        @apply gl-bg-gray-100;
+        background-color: var(--gl-filtered-search-token-type-background-color-hover);
+      }
+
+      .gl-filtered-search-token-data {
+        background-color: var(--gl-filtered-search-token-data-background-color-hover);
       }
 
-      .gl-filtered-search-token-data,
       .gl-filtered-search-token-operator {
-        @apply gl-bg-gray-200;
+        background-color: var(--gl-filtered-search-token-operator-background-color-hover);
       }
     }
   }
@@ -27,26 +30,26 @@
 
   &.gl-filtered-search-token-type {
     @apply gl-h-6;
-    @apply gl-bg-gray-50;
     @apply gl-rounded-tr-none;
     @apply gl-rounded-br-none;
     @apply gl-py-2;
     @apply gl-px-3;
     @apply gl-mr-1;
+    background-color: var(--gl-filtered-search-token-type-background-color-default);
   }
 
   &.gl-filtered-search-token-operator {
     @apply gl-h-6;
-    @apply gl-bg-gray-50;
     @apply gl-mr-1;
     @apply gl-rounded-none;
+    background-color: var(--gl-filtered-search-token-operator-background-color-default);
   }
 
   &.gl-filtered-search-token-data {
     @apply gl-h-6;
-    @apply gl-bg-gray-100;
     @apply gl-rounded-tr-small;
     @apply gl-rounded-br-small;
+    background-color: var(--gl-filtered-search-token-data-background-color-default);
 
     .gl-filtered-search-token-data-content {
       @apply gl-inline-flex;
@@ -55,6 +58,6 @@
 }
 
 .gl-filtered-search-token-operator-description {
-  @apply gl-text-gray-600;
+  @apply gl-text-subtle;
   @include gl-ml-auto;
 }

package/src/components/base/filtered_search/filtered_search_token_segment.scss

@@ -14,6 +14,7 @@
 .gl-filtered-search-token-segment-input {
   @apply gl-p-0;
   @apply gl-h-full;
+  @apply gl-bg-transparent;
   @apply gl-border-none;
   @include gl-outline-none;
   min-width: $gl-dropdown-width;

package/src/components/base/form/form_checkbox/form_checkbox.scss

@@ -33,7 +33,7 @@
     &:active,
     &:focus,
     &:focus:active {
-      @include gl-focus;
+      @apply gl-focus;
     }
   }
 
@@ -76,7 +76,7 @@
     }
 
     .custom-control-input:not(:disabled):focus ~ .custom-control-label::before {
-      @include gl-focus;
+      @apply gl-focus;
       border-color: var(--gl-control-border-color-focus);
     }
 

package/src/components/base/infinite_scroll/infinite_scroll.scss

@@ -1,6 +1,6 @@
 .gl-infinite-scroll-container {
-  @include gl-overflow-x-hidden;
-  @include gl-overflow-y-auto;
+  @apply gl-overflow-x-hidden;
+  @apply gl-overflow-y-auto;
   @apply gl-text-base;
 }
 

package/src/components/base/label/label.scss

@@ -6,9 +6,9 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
 .gl-label {
   @apply gl-items-center;
   background-color: var(--gl-background-color-default);
-  @include gl-overflow-hidden;
+  @apply gl-overflow-hidden;
   @apply gl-inline-flex;
-  @include gl-rounded-pill;
+  @apply gl-rounded-pill;
   position: relative;
   @include gl-max-w-full;
   @apply gl-text-sm;
@@ -30,7 +30,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
   .gl-label-link {
     @apply gl-flex;
     @apply gl-font-normal;
-    @include gl-overflow-hidden;
+    @apply gl-overflow-hidden;
     @apply gl-text-inherit;
     @include gl-max-w-full;
 
@@ -71,12 +71,12 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     margin-left: -$label-padding-horizontal-half;
     margin-right: $label-padding-horizontal-half;
     @apply gl-p-0;
-    @include gl-rounded-full;
+    @apply gl-rounded-full;
     @include gl-shadow-none;
 
     &:focus,
     &:active {
-      @include gl-focus;
+      @apply gl-focus;
     }
 
     .gl-icon {

package/src/components/base/loading_icon/loading_icon.scss

@@ -36,7 +36,7 @@ $gl-loader-dots-size-xl: 1rem;
 .gl-spinner {
   position: relative;
   @apply gl-inline-flex;
-  @include gl-rounded-full;
+  @apply gl-rounded-full;
   @apply gl-border-solid;
   @include gl-mx-auto;
   @apply gl-my-0;

package/src/components/base/markdown/markdown.scss

@@ -108,7 +108,7 @@
     @apply gl-px-4;
     @include gl-inset-border-1-gray-100;
     @apply gl-my-7;
-    @include gl-overflow-auto;
+    @apply gl-overflow-auto;
 
     code {
       @apply gl-bg-white;

package/src/components/base/markdown/markdown_typescale_demo.html

@@ -140,7 +140,7 @@
 
   code {
     @apply gl-bg-white;
-    @include gl-rounded-none;
+    @apply gl-rounded-none;
     @apply gl-text-gray-900;
     @include gl-px-0;
     @include gl-py-0;

package/src/components/base/modal/modal.scss

@@ -9,7 +9,7 @@ $modal-box-shadow: 0 4px 16px $t-gray-a-24;
 }
 
 body.modal-open {
-  @include gl-overflow-hidden;
+  @apply gl-overflow-hidden;
 }
 
 .gl-modal {

package/src/components/base/nav/nav.scss

@@ -1,7 +1,7 @@
 .nav {
   &-link {
     &:focus-visible {
-      @include gl-focus;
+      @apply gl-focus;
     }
   }
 }

package/src/components/base/new_dropdowns/dropdown.scss

@@ -7,7 +7,7 @@
       @include gl-cursor-pointer;
 
       &:focus {
-        @include gl-focus;
+        @apply gl-focus;
       }
     }
   }
@@ -16,7 +16,7 @@
     @apply gl-hidden;
     @apply gl-bg-white;
     @apply gl-border-1 gl-border-solid gl-border-gray-200;
-    @include gl-rounded-lg;
+    @apply gl-rounded-lg;
     @include gl-shadow-md;
     top: 0;
     left: 0;
@@ -34,14 +34,14 @@
   .gl-new-dropdown-contents {
     position: relative;
     @apply gl-grow;
-    @include gl-overflow-y-auto;
+    @apply gl-overflow-y-auto;
     @apply gl-pl-0;
     @apply gl-mb-0;
     @apply gl-py-2;
     @apply gl-list-none;
 
     &:focus-visible {
-      @include gl-focus;
+      @apply gl-focus;
     }
 
     ul {
@@ -72,7 +72,7 @@
 
   .gl-new-dropdown-button-text {
     @include gl-mr-auto;
-    @include gl-overflow-hidden;
+    @apply gl-overflow-hidden;
     @apply gl-text-ellipsis;
   }
 

package/src/components/base/path/path.scss

@@ -35,7 +35,7 @@ $path-chevron-right-margin: px-to-rem(14px);
     @apply gl-m-0;
     @apply gl-list-none;
     @apply gl-inline-flex;
-    @include gl-overflow-hidden;
+    @apply gl-overflow-hidden;
     margin-left: -1px;
     position: relative;
   }

package/src/components/base/segmented_control/segmented_control.scss

@@ -77,7 +77,7 @@
     }
 
     &:focus-within {
-      @include gl-focus;
+      @apply gl-focus;
     }
 
     &.disabled,

package/src/components/base/table/table.scss

@@ -39,7 +39,7 @@ table.gl-table {
     }
 
     &:focus-visible {
-      @include gl-focus;
+      @apply gl-focus;
       position: relative;
       z-index: 1;
     }

package/src/components/base/tabs/tabs/tabs.scss

@@ -158,7 +158,7 @@
 }
 
 .gl-scrollable-tabs-nav {
-  @include gl-overflow-hidden;
+  @apply gl-overflow-hidden;
   position: relative;
   @include gl-flex-nowrap;
 }

package/src/components/base/toggle/toggle.scss

@@ -92,7 +92,7 @@ $toggle-height: 2.5 * $grid-size;
   height: $toggle-height;
   @include gl-outline-none;
   user-select: none;
-  @include gl-rounded-pill;
+  @apply gl-rounded-pill;
   @include gl-transition-slow;
   @apply gl-leading-normal;
 
@@ -112,7 +112,7 @@ $toggle-height: 2.5 * $grid-size;
   &:active,
   &:focus,
   &:focus:active {
-    @include gl-focus;
+    @apply gl-focus;
   }
 
   .toggle-loading {
@@ -120,7 +120,7 @@ $toggle-height: 2.5 * $grid-size;
   }
 
   .toggle-icon {
-    @include gl-rounded-full;
+    @apply gl-rounded-full;
     @apply gl-bg-white;
     position: absolute;
     @apply gl-inline-flex;

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

@@ -1,7 +1,7 @@
 .gl-token {
-  @apply gl-text-gray-900;
-  @apply gl-bg-gray-100;
-  @include gl-rounded-small;
+  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;
   @apply gl-flex-col;
@@ -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/components/charts/legend/legend.scss

@@ -10,7 +10,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
   .gl-legend-inline {
       // match the height of gl-legend-tabular (header + body)
       max-height: $gl-line-height-24 + $legend-body-h;
-      @include gl-overflow-auto;
+      @apply gl-overflow-auto;
   }
 }
 
@@ -59,7 +59,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
   .gl-legend-tabular-header-cell,
   .gl-legend-tabular-details-cell {
     @apply gl-whitespace-nowrap;
-    @include gl-overflow-hidden;
+    @apply gl-overflow-hidden;
     @apply gl-text-ellipsis;
     @apply gl-text-right;
     @apply gl-w-1/8;
@@ -73,7 +73,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 
   .gl-legend-tabular-body {
     height: $legend-body-h;
-    @include gl-overflow-y-auto;
+    @apply gl-overflow-y-auto;
   }
 
   .gl-legend-tabular-row {
@@ -91,7 +91,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
   }
 
   .gl-legend-tabular-title-cell {
-    @include gl-overflow-hidden;
+    @apply gl-overflow-hidden;
     @apply gl-w-1/2;
   }
 }

package/src/components/charts/series_label/series_label.scss

@@ -1,7 +1,7 @@
 .gl-series-label-container {
   @apply gl-flex;
   @apply gl-text-base;
-  @include gl-overflow-hidden;
+  @apply gl-overflow-hidden;
   @apply gl-break-words;
 }
 
@@ -18,6 +18,6 @@
   // In case there are no spaces in the series label -
   // as there are quite a few possible cases where
   // Prometheus queries return long labels with no spaces.
-  @include gl-overflow-hidden;
+  @apply gl-overflow-hidden;
   @apply gl-break-words;
 }

package/src/components/experimental/duo/chat/duo_chat.scss

@@ -41,7 +41,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   position: fixed;
   @apply gl-h-full;
   @apply gl-w-full;
-  @include gl-overflow-y-auto;
+  @apply gl-overflow-y-auto;
   @include gl-shadow-lg;
   @apply gl-text-base;
   @apply gl-leading-normal;

package/src/components/shared_components/clear_icon_button/clear_icon_button.scss

@@ -5,6 +5,6 @@
   @apply gl-text-gray-500;
 
   &:focus {
-    @include gl-focus;
+    @apply gl-focus;
   }
 }

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.