@gitlab/ui 115.9.1 → 115.9.2

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

@@ -642,7 +642,7 @@ const GL_SPINNER_TRACK_COLOR_DEFAULT = '#626168';
 const GL_SPINNER_TRACK_COLOR_LIGHT = '#3a383f';
 const GL_SPINNER_SEGMENT_COLOR_DEFAULT = '#dcdcde';
 const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3';
-const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#28272d';
+const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#1d283e';
 const GL_TABLE_SORTING_ICON_COLOR = '#fff';
 const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#428fdc';
 const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT = '#4c4b51';

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

@@ -642,7 +642,7 @@ const GL_SPINNER_TRACK_COLOR_DEFAULT = '#dcdcde';
 const GL_SPINNER_TRACK_COLOR_LIGHT = '#3a383f';
 const GL_SPINNER_SEGMENT_COLOR_DEFAULT = '#4c4b51';
 const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3';
-const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#fbfafd';
+const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#e9f3fc';
 const GL_TABLE_SORTING_ICON_COLOR = '#18171d';
 const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#1f75cb';
 const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT = '#626168';

package/dist/tokens/css/tokens.css

@@ -952,7 +952,7 @@
   --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */
   --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */
   --gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /** Used for the indicator color for the danger progress-bar variant. */
-  --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /** Used for the background of a table row in hover state. */
+  --gl-table-row-background-color-hover: var(--gl-highlight-target-background-color); /** Used for the background of a table row in hover state. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /** Used for the color of the sorting icons in the column headers. */
   --gl-toggle-switch-icon-color-unchecked-default: var(--gl-action-strong-neutral-background-color-default); /** Used for the icon color of an unchecked toggle switch in the default state. */
   --gl-toggle-switch-icon-color-unchecked-hover: var(--gl-action-strong-neutral-background-color-hover); /** Used for the icon color of an unchecked toggle switch in the hover state. */

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

@@ -952,7 +952,7 @@
   --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */
   --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */
   --gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /** Used for the indicator color for the danger progress-bar variant. */
-  --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /** Used for the background of a table row in hover state. */
+  --gl-table-row-background-color-hover: var(--gl-highlight-target-background-color); /** Used for the background of a table row in hover state. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /** Used for the color of the sorting icons in the column headers. */
   --gl-toggle-switch-icon-color-unchecked-default: var(--gl-action-strong-neutral-background-color-default); /** Used for the icon color of an unchecked toggle switch in the default state. */
   --gl-toggle-switch-icon-color-unchecked-hover: var(--gl-action-strong-neutral-background-color-hover); /** Used for the icon color of an unchecked toggle switch in the hover state. */

package/dist/tokens/figma/contextual.tokens.json

@@ -5573,7 +5573,7 @@
       "background": {
         "color": {
           "hover": {
-            "$value": "{background.color.subtle}",
+            "$value": "{highlight.target.background.color}",
             "$type": "color",
             "$description": "Used for the background of a table row in hover state.",
             "$extensions": {

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

@@ -672,7 +672,7 @@ export const GL_SPINNER_TRACK_COLOR_DEFAULT = "#626168";
 export const GL_SPINNER_TRACK_COLOR_LIGHT = "#3a383f";
 export const GL_SPINNER_SEGMENT_COLOR_DEFAULT = "#dcdcde";
 export const GL_SPINNER_SEGMENT_COLOR_LIGHT = "#bfbfc3";
-export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = "#28272d";
+export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = "#1d283e";
 export const GL_TABLE_SORTING_ICON_COLOR = "#fff";
 export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = "#428fdc";
 export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT = "#4c4b51";

package/dist/tokens/js/tokens.js

@@ -660,7 +660,7 @@ export const GL_SPINNER_TRACK_COLOR_DEFAULT = "#dcdcde";
 export const GL_SPINNER_TRACK_COLOR_LIGHT = "#3a383f";
 export const GL_SPINNER_SEGMENT_COLOR_DEFAULT = "#4c4b51";
 export const GL_SPINNER_SEGMENT_COLOR_LIGHT = "#bfbfc3";
-export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = "#fbfafd";
+export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = "#e9f3fc";
 export const GL_TABLE_SORTING_ICON_COLOR = "#18171d";
 export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = "#1f75cb";
 export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT = "#626168";

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

@@ -21052,7 +21052,7 @@
         "color": {
           "hover": {
             "key": "{table.row.background.color.hover}",
-            "$value": "#28272d",
+            "$value": "#1d283e",
             "$type": "color",
             "$description": "Used for the background of a table row in hover state.",
             "$extensions": {
@@ -21064,7 +21064,7 @@
             "filePath": "src/tokens/contextual/table.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{background.color.subtle}",
+              "$value": "{highlight.target.background.color}",
               "$type": "color",
               "$description": "Used for the background of a table row in hover state.",
               "$extensions": {

package/dist/tokens/json/tokens.json

@@ -21052,7 +21052,7 @@
         "color": {
           "hover": {
             "key": "{table.row.background.color.hover}",
-            "$value": "#fbfafd",
+            "$value": "#e9f3fc",
             "$type": "color",
             "$description": "Used for the background of a table row in hover state.",
             "$extensions": {
@@ -21064,7 +21064,7 @@
             "filePath": "src/tokens/contextual/table.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{background.color.subtle}",
+              "$value": "{highlight.target.background.color}",
               "$type": "color",
               "$description": "Used for the background of a table row in hover state.",
               "$extensions": {

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

@@ -950,7 +950,7 @@ $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used fo
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
 $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
-$gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
+$gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-toggle-switch-icon-color-unchecked-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
 $gl-toggle-switch-icon-color-unchecked-hover: $gl-action-strong-neutral-background-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.

package/dist/tokens/scss/_tokens.scss

@@ -950,7 +950,7 @@ $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used fo
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
 $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
-$gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
+$gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-toggle-switch-icon-color-unchecked-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
 $gl-toggle-switch-icon-color-unchecked-hover: $gl-action-strong-neutral-background-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.

package/package.json

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

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

@@ -952,7 +952,7 @@
   --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */
   --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */
   --gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /** Used for the indicator color for the danger progress-bar variant. */
-  --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /** Used for the background of a table row in hover state. */
+  --gl-table-row-background-color-hover: var(--gl-highlight-target-background-color); /** Used for the background of a table row in hover state. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /** Used for the color of the sorting icons in the column headers. */
   --gl-toggle-switch-icon-color-unchecked-default: var(--gl-action-strong-neutral-background-color-default); /** Used for the icon color of an unchecked toggle switch in the default state. */
   --gl-toggle-switch-icon-color-unchecked-hover: var(--gl-action-strong-neutral-background-color-hover); /** Used for the icon color of an unchecked toggle switch in the hover state. */

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

@@ -952,7 +952,7 @@
   --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */
   --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */
   --gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /** Used for the indicator color for the danger progress-bar variant. */
-  --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /** Used for the background of a table row in hover state. */
+  --gl-table-row-background-color-hover: var(--gl-highlight-target-background-color); /** Used for the background of a table row in hover state. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /** Used for the color of the sorting icons in the column headers. */
   --gl-toggle-switch-icon-color-unchecked-default: var(--gl-action-strong-neutral-background-color-default); /** Used for the icon color of an unchecked toggle switch in the default state. */
   --gl-toggle-switch-icon-color-unchecked-hover: var(--gl-action-strong-neutral-background-color-hover); /** Used for the icon color of an unchecked toggle switch in the hover state. */

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

@@ -5573,7 +5573,7 @@
       "background": {
         "color": {
           "hover": {
-            "$value": "{background.color.subtle}",
+            "$value": "{highlight.target.background.color}",
             "$type": "color",
             "$description": "Used for the background of a table row in hover state.",
             "$extensions": {

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

@@ -642,7 +642,7 @@ export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#626168';
 export const GL_SPINNER_TRACK_COLOR_LIGHT = '#3a383f';
 export const GL_SPINNER_SEGMENT_COLOR_DEFAULT = '#dcdcde';
 export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3';
-export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#28272d';
+export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#1d283e';
 export const GL_TABLE_SORTING_ICON_COLOR = '#fff';
 export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#428fdc';
 export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT = '#4c4b51';

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

@@ -642,7 +642,7 @@ export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#dcdcde';
 export const GL_SPINNER_TRACK_COLOR_LIGHT = '#3a383f';
 export const GL_SPINNER_SEGMENT_COLOR_DEFAULT = '#4c4b51';
 export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3';
-export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#fbfafd';
+export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#e9f3fc';
 export const GL_TABLE_SORTING_ICON_COLOR = '#18171d';
 export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#1f75cb';
 export const GL_TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT = '#626168';

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

@@ -21052,7 +21052,7 @@
         "color": {
           "hover": {
             "key": "{table.row.background.color.hover}",
-            "$value": "#28272d",
+            "$value": "#1d283e",
             "$type": "color",
             "$description": "Used for the background of a table row in hover state.",
             "$extensions": {
@@ -21064,7 +21064,7 @@
             "filePath": "src/tokens/contextual/table.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{background.color.subtle}",
+              "$value": "{highlight.target.background.color}",
               "$type": "color",
               "$description": "Used for the background of a table row in hover state.",
               "$extensions": {

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

@@ -21052,7 +21052,7 @@
         "color": {
           "hover": {
             "key": "{table.row.background.color.hover}",
-            "$value": "#fbfafd",
+            "$value": "#e9f3fc",
             "$type": "color",
             "$description": "Used for the background of a table row in hover state.",
             "$extensions": {
@@ -21064,7 +21064,7 @@
             "filePath": "src/tokens/contextual/table.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{background.color.subtle}",
+              "$value": "{highlight.target.background.color}",
               "$type": "color",
               "$description": "Used for the background of a table row in hover state.",
               "$extensions": {

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

@@ -950,7 +950,7 @@ $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used fo
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
 $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
-$gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
+$gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-toggle-switch-icon-color-unchecked-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
 $gl-toggle-switch-icon-color-unchecked-hover: $gl-action-strong-neutral-background-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.

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

@@ -950,7 +950,7 @@ $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used fo
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
 $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
-$gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
+$gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-toggle-switch-icon-color-unchecked-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
 $gl-toggle-switch-icon-color-unchecked-hover: $gl-action-strong-neutral-background-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.

package/src/tokens/contextual/table.tokens.json

@@ -4,7 +4,7 @@
       "background": {
         "color": {
           "hover": {
-            "$value": "{background.color.subtle}",
+            "$value": "{highlight.target.background.color}",
             "$type": "color",
             "$description": "Used for the background of a table row in hover state.",
             "$extensions": {