@gitlab/ui 86.8.0 → 86.9.0

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

@@ -11571,6 +11571,59 @@
       }
     }
   },
+  "table": {
+    "row": {
+      "background": {
+        "color": {
+          "hover": {
+            "value": "#fbfafd",
+            "$type": "color",
+            "comment": "Used for the background of a table row in hover state.",
+            "filePath": "src/tokens/contextual/table.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{background.color.subtle}",
+              "$type": "color",
+              "comment": "Used for the background of a table row in hover state."
+            },
+            "name": "TABLE_ROW_BACKGROUND_COLOR_HOVER",
+            "attributes": {},
+            "path": [
+              "table",
+              "row",
+              "background",
+              "color",
+              "hover"
+            ]
+          }
+        }
+      }
+    },
+    "sorting": {
+      "icon": {
+        "color": {
+          "value": "#1f1e24",
+          "$type": "color",
+          "comment": "Used for the color of the sorting icons in the column headers.",
+          "filePath": "src/tokens/contextual/table.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{text.color.heading}",
+            "$type": "color",
+            "comment": "Used for the color of the sorting icons in the column headers."
+          },
+          "name": "TABLE_SORTING_ICON_COLOR",
+          "attributes": {},
+          "path": [
+            "table",
+            "sorting",
+            "icon",
+            "color"
+          ]
+        }
+      }
+    }
+  },
   "control": {
     "background": {
       "color": {

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

@@ -670,3 +670,5 @@ $gl-action-text-color-disabled: $gl-color-neutral-400; // Used for the text of a
 $gl-action-border-color-disabled: $gl-color-neutral-800; // Used for the border of a disabled action.
 $gl-action-background-color-disabled: $gl-color-neutral-900; // Used for the background of a disabled action.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
+$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.

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

@@ -670,3 +670,5 @@ $gl-action-text-color-disabled: $gl-color-neutral-500; // Used for the text of a
 $gl-action-border-color-disabled: $gl-color-neutral-100; // Used for the border of a disabled action.
 $gl-action-background-color-disabled: $gl-color-neutral-50; // Used for the background of a disabled action.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
+$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.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -529,6 +529,8 @@ $gl-spinner-track-color-default: var(--gl-spinner-track-color-default);
 $gl-spinner-track-color-light: var(--gl-spinner-track-color-light);
 $gl-spinner-segment-color-default: var(--gl-spinner-segment-color-default);
 $gl-spinner-segment-color-light: var(--gl-spinner-segment-color-light);
+$gl-table-row-background-color-hover: var(--gl-table-row-background-color-hover);
+$gl-table-sorting-icon-color: var(--gl-table-sorting-icon-color);
 $gl-control-background-color-default: var(--gl-control-background-color-default);
 $gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
 $gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);

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

@@ -0,0 +1,24 @@
+{
+  "table": {
+    "row": {
+      "background": {
+        "color": {
+          "hover": {
+            "$value": "{background.color.subtle}",
+            "$type": "color",
+            "$description": "Used for the background of a table row in hover state."
+          }
+        }
+      }
+    },
+    "sorting": {
+      "icon": {
+        "color": {
+          "$value": "{text.color.heading}",
+          "$type": "color",
+          "$description": "Used for the color of the sorting icons in the column headers."
+        }
+      }
+    }
+  }
+}