@gitlab/ui 114.1.1 → 114.2.0

package/src/tokens/build/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/src/tokens/build/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/src/tokens/build/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/src/tokens/semantic/highlight.tokens.json

@@ -0,0 +1,48 @@
+{
+  "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."
+        }
+      }
+    }
+  }
+}