@gitlab/ui 114.1.1 → 114.2.0

package/dist/tokens/json/tokens.json

@@ -23010,6 +23010,112 @@
       }
     }
   },
+  "highlight": {
+    "match": {
+      "background": {
+        "color": {
+          "$value": "#ab6100",
+          "$type": "color",
+          "$description": "Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning.",
+          "filePath": "src/tokens/semantic/highlight.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.orange.500}",
+              "dark": "{color.orange.200}"
+            },
+            "$type": "color",
+            "$description": "Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning."
+          },
+          "name": "HIGHLIGHT_MATCH_BACKGROUND_COLOR",
+          "attributes": {},
+          "path": [
+            "highlight",
+            "match",
+            "background",
+            "color"
+          ]
+        }
+      },
+      "text": {
+        "color": {
+          "$value": "#fff",
+          "$type": "color",
+          "$description": "Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status.",
+          "filePath": "src/tokens/semantic/highlight.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status."
+          },
+          "name": "HIGHLIGHT_MATCH_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "highlight",
+            "match",
+            "text",
+            "color"
+          ]
+        }
+      }
+    },
+    "target": {
+      "background": {
+        "color": {
+          "$value": "#e9f3fc",
+          "$type": "color",
+          "$description": "Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action.",
+          "filePath": "src/tokens/semantic/highlight.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.blue.50}",
+              "dark": "{color.blue.950}"
+            },
+            "$type": "color",
+            "$description": "Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action."
+          },
+          "name": "HIGHLIGHT_TARGET_BACKGROUND_COLOR",
+          "attributes": {},
+          "path": [
+            "highlight",
+            "target",
+            "background",
+            "color"
+          ]
+        }
+      },
+      "border": {
+        "color": {
+          "$value": "#9dc7f1",
+          "$type": "color",
+          "$description": "Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states.",
+          "filePath": "src/tokens/semantic/highlight.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.blue.200}",
+              "dark": "{color.blue.700}"
+            },
+            "$type": "color",
+            "$description": "Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states."
+          },
+          "name": "HIGHLIGHT_TARGET_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "highlight",
+            "target",
+            "border",
+            "color"
+          ]
+        }
+      }
+    }
+  },
   "icon": {
     "color": {
       "default": {

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

@@ -829,6 +829,10 @@ $gl-feedback-danger-background-color: $gl-color-red-900; // Used for the backgro
 $gl-feedback-danger-text-color: $gl-color-red-200; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
 $gl-feedback-danger-icon-color: $gl-color-red-300; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
 $gl-focus-ring-outer-color: $gl-color-blue-400; // Used for the outer color portion of the focus ring.
+$gl-highlight-match-background-color: $gl-color-orange-200; // Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning.
+$gl-highlight-match-text-color: $gl-color-neutral-950; // Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status.
+$gl-highlight-target-background-color: $gl-color-blue-950; // Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action.
+$gl-highlight-target-border-color: $gl-color-blue-700; // Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states.
 $gl-icon-color-info: $gl-color-blue-200; // Used for an icon associated with information or help.
 $gl-shadow-color-default: $gl-color-alpha-dark-40; // Used for the default shadow color.
 $gl-status-neutral-background-color: $gl-color-neutral-800; // Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.

package/dist/tokens/scss/_tokens.scss

@@ -829,6 +829,10 @@ $gl-feedback-danger-background-color: $gl-color-red-50; // Used for the backgrou
 $gl-feedback-danger-text-color: $gl-color-red-700; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
 $gl-feedback-danger-icon-color: $gl-color-red-600; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
 $gl-focus-ring-outer-color: $gl-color-blue-500; // Used for the outer color portion of the focus ring.
+$gl-highlight-match-background-color: $gl-color-orange-500; // Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning.
+$gl-highlight-match-text-color: $gl-color-neutral-0; // Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status.
+$gl-highlight-target-background-color: $gl-color-blue-50; // Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action.
+$gl-highlight-target-border-color: $gl-color-blue-200; // Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states.
 $gl-icon-color-info: $gl-color-blue-700; // Used for an icon associated with information or help.
 $gl-shadow-color-default: $gl-color-alpha-dark-16; // Used for the default shadow color.
 $gl-status-neutral-background-color: $gl-color-neutral-100; // Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -1005,6 +1005,10 @@ $gl-feedback-danger-text-color: var(--gl-feedback-danger-text-color);
 $gl-feedback-danger-icon-color: var(--gl-feedback-danger-icon-color);
 $gl-focus-ring-outer-color: var(--gl-focus-ring-outer-color);
 $gl-focus-ring-inner-color: var(--gl-focus-ring-inner-color);
+$gl-highlight-match-background-color: var(--gl-highlight-match-background-color);
+$gl-highlight-match-text-color: var(--gl-highlight-match-text-color);
+$gl-highlight-target-background-color: var(--gl-highlight-target-background-color);
+$gl-highlight-target-border-color: var(--gl-highlight-target-border-color);
 $gl-icon-color-default: var(--gl-icon-color-default);
 $gl-icon-color-subtle: var(--gl-icon-color-subtle);
 $gl-icon-color-strong: var(--gl-icon-color-strong);

package/package.json

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

package/src/components/base/breadcrumb/breadcrumb.md

@@ -1,5 +1,22 @@
 ## Usage
 
+The `GlBreadcrumb` component comes with a smart auto-resize feature. When there is not enough space
+to show all breadcrumb `items` in a single row, the component moves items into an ellipsis dropdown,
+starting with the first one. The last breadcrumb item (which represents the current page) stays
+always visible.
+
+### Auto-resize
+
+**Important:** For the auto-resize to function correctly it is necessary that the `GlBreadcrumb`
+component itself takes all the horizontal space it can get. How to do this depends on the
+CSS `display` mode (block, flex, grid) of its parent element.
+
+**Example:** In a flexbox layout, allow the component to `flex-grow`:
+
+```js
+<gl-breadcrumb class="gl-grow" :items="items" />
+```
+
 ### `items` prop
 
 This component also allows for optional avatars on each item.

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -33,8 +33,9 @@ $breadcrumb-max-width: $grid-size * 16;
     text-decoration-thickness: auto;
     text-decoration-style: solid;
     text-decoration-color: transparent;
-    transition: box-shadow $gl-transition-duration-medium $gl-easing-out-cubic,
-                text-decoration-color $gl-transition-duration-medium $gl-easing-out-cubic;
+    transition:
+      box-shadow $gl-transition-duration-medium $gl-easing-out-cubic,
+      text-decoration-color $gl-transition-duration-medium $gl-easing-out-cubic;
     @include gl-prefers-reduced-motion-transition;
 
     &:hover {
@@ -66,4 +67,19 @@ $breadcrumb-max-width: $grid-size * 16;
 
 .gl-breadcrumb-item-md {
   @apply gl-text-base;
+
+  /**
+   * If the last/only item, which is always visible, has a very long title,
+   * it could overflow the breadcrumb component. This CSS makes sure it
+   * shows an ellipsis instead.
+   * But this CSS cannot be active while we do the size calculation, as that
+   * would then not take the real unshrunk width of that item into account.
+   */
+  &.gl-breadcrumb-only-item {
+    @apply gl-max-w-full gl-shrink;
+
+    a {
+      @apply gl-max-w-full gl-overflow-hidden gl-text-ellipsis gl-text-nowrap;
+    }
+  }
 }

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -81,23 +81,11 @@ export default {
     breadcrumbStyle() {
       return this.resizeDone ? {} : { opacity: 0 };
     },
-    itemStyle() {
-      /**
-       * If the last/only item, which is always visible, has a very long title,
-       * it could overflow the breadcrumb component. This CSS makes sure it
-       * shows an ellipsis instead.
-       * But this CSS cannot be active while we do the size calculation, as that
-       * would then not take the real unshrunk width of that item into account.
-       */
+    itemClass() {
       if (this.resizeDone && this.fittingItems.length === 1) {
-        return {
-          'flex-shrink': 1,
-          'text-overflow': 'ellipsis',
-          'overflow-x': 'hidden',
-          'text-wrap': 'nowrap',
-        };
+        return 'gl-breadcrumb-only-item';
       }
-      return {};
+      return '';
     },
     dropdownSize() {
       return this.size === 'sm' ? 'small' : 'medium';
@@ -231,11 +219,10 @@ export default {
         :key="index"
         :text="item.text"
         :href="item.href"
-        :style="itemStyle"
         :to="item.to"
         :size="size"
         :aria-current="getAriaCurrentAttr(index)"
-        :class="hideItemClass(item)"
+        :class="[hideItemClass(item), itemClass]"
         ><gl-avatar
           v-if="item.avatarPath"
           :src="item.avatarPath"

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

@@ -10,37 +10,35 @@ table.gl-table {
       @apply gl-leading-normal;
       @apply gl-text-base;
       @apply gl-align-top;
+      @apply gl-text-default;
+      @apply gl-font-normal;
     }
 
-    th {
-      @apply gl-text-heading gl-font-bold;
+    &:focus-visible {
+      @apply gl-focus;
+      position: relative;
+      z-index: 1;
+    }
+  }
 
-      .gl-table-th-sort-icon-wrapper {
-        @apply gl-ml-2;
-      }
+  thead tr th {
+    @apply gl-text-heading gl-font-bold;
 
-      &.gl-table-th-align-right > div {
-        @apply gl-flex-row-reverse;
+    .gl-table-th-sort-icon-wrapper {
+      @apply gl-ml-2;
+    }
 
-        .gl-table-th-sort-icon-wrapper {
-          @apply gl-ml-0 gl-mr-2;
-        }
-      }
+    &.gl-table-th-align-right > div {
+      @apply gl-flex-row-reverse;
 
-      [name='sort-icon'] {
-        user-select: none;
-        color: var(--gl-table-sorting-icon-color);
+      .gl-table-th-sort-icon-wrapper {
+        @apply gl-ml-0 gl-mr-2;
       }
     }
 
-    td {
-      @apply gl-text-default;
-    }
-
-    &:focus-visible {
-      @apply gl-focus;
-      position: relative;
-      z-index: 1;
+    [name='sort-icon'] {
+      user-select: none;
+      color: var(--gl-table-sorting-icon-color);
     }
   }
 
@@ -74,7 +72,8 @@ table.gl-table {
         @apply gl-block;
       }
 
-      > td[data-label] {
+      > td[data-label],
+      > th[data-label] {
         @apply gl-border-l-1 gl-border-r-1 gl-border-l-solid gl-border-r-solid;
 
         &::before {

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

@@ -831,6 +831,10 @@
   --gl-feedback-danger-text-color: var(--gl-color-red-700); /* Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
   --gl-feedback-danger-icon-color: var(--gl-color-red-600); /* Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
   --gl-focus-ring-outer-color: var(--gl-color-blue-500); /* Used for the outer color portion of the focus ring. */
+  --gl-highlight-match-background-color: var(--gl-color-orange-500); /* Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning. */
+  --gl-highlight-match-text-color: var(--gl-color-neutral-0); /* Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status. */
+  --gl-highlight-target-background-color: var(--gl-color-blue-50); /* Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action. */
+  --gl-highlight-target-border-color: var(--gl-color-blue-200); /* Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states. */
   --gl-icon-color-info: var(--gl-color-blue-700); /* Used for an icon associated with information or help. */
   --gl-shadow-color-default: var(--gl-color-alpha-dark-16); /* Used for the default shadow color. */
   --gl-status-neutral-background-color: var(--gl-color-neutral-100); /* Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */

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

@@ -831,6 +831,10 @@
   --gl-feedback-danger-text-color: var(--gl-color-red-200); /* Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
   --gl-feedback-danger-icon-color: var(--gl-color-red-300); /* Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention. */
   --gl-focus-ring-outer-color: var(--gl-color-blue-400); /* Used for the outer color portion of the focus ring. */
+  --gl-highlight-match-background-color: var(--gl-color-orange-200); /* Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning. */
+  --gl-highlight-match-text-color: var(--gl-color-neutral-950); /* Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status. */
+  --gl-highlight-target-background-color: var(--gl-color-blue-950); /* Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action. */
+  --gl-highlight-target-border-color: var(--gl-color-blue-700); /* Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states. */
   --gl-icon-color-info: var(--gl-color-blue-200); /* Used for an icon associated with information or help. */
   --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /* Used for the default shadow color. */
   --gl-status-neutral-background-color: var(--gl-color-neutral-800); /* Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */

package/src/tokens/build/figma/semantic.tokens.json

@@ -1059,6 +1059,52 @@
       }
     }
   },
+  "highlight": {
+    "match": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.orange.500}",
+            "dark": "{color.orange.200}"
+          },
+          "$type": "color",
+          "$description": "Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning."
+        }
+      },
+      "text": {
+        "color": {
+          "$value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.950}"
+          },
+          "$type": "color",
+          "$description": "Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status."
+        }
+      }
+    },
+    "target": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.blue.50}",
+            "dark": "{color.blue.950}"
+          },
+          "$type": "color",
+          "$description": "Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action."
+        }
+      },
+      "border": {
+        "color": {
+          "$value": {
+            "default": "{color.blue.200}",
+            "dark": "{color.blue.700}"
+          },
+          "$type": "color",
+          "$description": "Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states."
+        }
+      }
+    }
+  },
   "icon": {
     "color": {
       "default": {

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

@@ -1005,6 +1005,10 @@ export const GL_FEEDBACK_DANGER_TEXT_COLOR = '#fcb5aa';
 export const GL_FEEDBACK_DANGER_ICON_COLOR = '#f6806d';
 export const GL_FOCUS_RING_OUTER_COLOR = '#428fdc';
 export const GL_FOCUS_RING_INNER_COLOR = '#18171d';
+export const GL_HIGHLIGHT_MATCH_BACKGROUND_COLOR = '#e9be74';
+export const GL_HIGHLIGHT_MATCH_TEXT_COLOR = '#18171d';
+export const GL_HIGHLIGHT_TARGET_BACKGROUND_COLOR = '#1d283e';
+export const GL_HIGHLIGHT_TARGET_BORDER_COLOR = '#2f5ca0';
 export const GL_ICON_COLOR_DEFAULT = '#ececef';
 export const GL_ICON_COLOR_SUBTLE = '#bfbfc3';
 export const GL_ICON_COLOR_STRONG = '#fff';

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

@@ -1005,6 +1005,10 @@ export const GL_FEEDBACK_DANGER_TEXT_COLOR = '#a32c12';
 export const GL_FEEDBACK_DANGER_ICON_COLOR = '#c02f12';
 export const GL_FOCUS_RING_OUTER_COLOR = '#1f75cb';
 export const GL_FOCUS_RING_INNER_COLOR = '#fff';
+export const GL_HIGHLIGHT_MATCH_BACKGROUND_COLOR = '#ab6100';
+export const GL_HIGHLIGHT_MATCH_TEXT_COLOR = '#fff';
+export const GL_HIGHLIGHT_TARGET_BACKGROUND_COLOR = '#e9f3fc';
+export const GL_HIGHLIGHT_TARGET_BORDER_COLOR = '#9dc7f1';
 export const GL_ICON_COLOR_DEFAULT = '#3a383f';
 export const GL_ICON_COLOR_SUBTLE = '#626168';
 export const GL_ICON_COLOR_STRONG = '#18171d';

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

@@ -23010,6 +23010,112 @@
       }
     }
   },
+  "highlight": {
+    "match": {
+      "background": {
+        "color": {
+          "$value": "#e9be74",
+          "$type": "color",
+          "$description": "Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning.",
+          "filePath": "src/tokens/semantic/highlight.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.orange.500}",
+              "dark": "{color.orange.200}"
+            },
+            "$type": "color",
+            "$description": "Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning."
+          },
+          "name": "HIGHLIGHT_MATCH_BACKGROUND_COLOR",
+          "attributes": {},
+          "path": [
+            "highlight",
+            "match",
+            "background",
+            "color"
+          ]
+        }
+      },
+      "text": {
+        "color": {
+          "$value": "#18171d",
+          "$type": "color",
+          "$description": "Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status.",
+          "filePath": "src/tokens/semantic/highlight.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status."
+          },
+          "name": "HIGHLIGHT_MATCH_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "highlight",
+            "match",
+            "text",
+            "color"
+          ]
+        }
+      }
+    },
+    "target": {
+      "background": {
+        "color": {
+          "$value": "#1d283e",
+          "$type": "color",
+          "$description": "Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action.",
+          "filePath": "src/tokens/semantic/highlight.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.blue.50}",
+              "dark": "{color.blue.950}"
+            },
+            "$type": "color",
+            "$description": "Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action."
+          },
+          "name": "HIGHLIGHT_TARGET_BACKGROUND_COLOR",
+          "attributes": {},
+          "path": [
+            "highlight",
+            "target",
+            "background",
+            "color"
+          ]
+        }
+      },
+      "border": {
+        "color": {
+          "$value": "#2f5ca0",
+          "$type": "color",
+          "$description": "Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states.",
+          "filePath": "src/tokens/semantic/highlight.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.blue.200}",
+              "dark": "{color.blue.700}"
+            },
+            "$type": "color",
+            "$description": "Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states."
+          },
+          "name": "HIGHLIGHT_TARGET_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "highlight",
+            "target",
+            "border",
+            "color"
+          ]
+        }
+      }
+    }
+  },
   "icon": {
     "color": {
       "default": {

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

@@ -23010,6 +23010,112 @@
       }
     }
   },
+  "highlight": {
+    "match": {
+      "background": {
+        "color": {
+          "$value": "#ab6100",
+          "$type": "color",
+          "$description": "Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning.",
+          "filePath": "src/tokens/semantic/highlight.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.orange.500}",
+              "dark": "{color.orange.200}"
+            },
+            "$type": "color",
+            "$description": "Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning."
+          },
+          "name": "HIGHLIGHT_MATCH_BACKGROUND_COLOR",
+          "attributes": {},
+          "path": [
+            "highlight",
+            "match",
+            "background",
+            "color"
+          ]
+        }
+      },
+      "text": {
+        "color": {
+          "$value": "#fff",
+          "$type": "color",
+          "$description": "Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status.",
+          "filePath": "src/tokens/semantic/highlight.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.950}"
+            },
+            "$type": "color",
+            "$description": "Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status."
+          },
+          "name": "HIGHLIGHT_MATCH_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "highlight",
+            "match",
+            "text",
+            "color"
+          ]
+        }
+      }
+    },
+    "target": {
+      "background": {
+        "color": {
+          "$value": "#e9f3fc",
+          "$type": "color",
+          "$description": "Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action.",
+          "filePath": "src/tokens/semantic/highlight.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.blue.50}",
+              "dark": "{color.blue.950}"
+            },
+            "$type": "color",
+            "$description": "Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action."
+          },
+          "name": "HIGHLIGHT_TARGET_BACKGROUND_COLOR",
+          "attributes": {},
+          "path": [
+            "highlight",
+            "target",
+            "background",
+            "color"
+          ]
+        }
+      },
+      "border": {
+        "color": {
+          "$value": "#9dc7f1",
+          "$type": "color",
+          "$description": "Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states.",
+          "filePath": "src/tokens/semantic/highlight.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.blue.200}",
+              "dark": "{color.blue.700}"
+            },
+            "$type": "color",
+            "$description": "Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states."
+          },
+          "name": "HIGHLIGHT_TARGET_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "highlight",
+            "target",
+            "border",
+            "color"
+          ]
+        }
+      }
+    }
+  },
   "icon": {
     "color": {
       "default": {