feat(GlTabe): Use color design tokens

Changes also apply to GlTableLite.

src/components/base/table/table.scss

 table.gl-table {
-  @include gl-bg-transparent;
+  background-color: var(--gl-color-alpha-0);
+  color: var(--gl-text-color-default);
 
   tr {
     th,
     td {
       @include gl-border-b-solid;
+      border-color: var(--gl-border-color-default);
       @include gl-border-b-1;
-      @include gl-border-gray-100;
       @include gl-p-5;
       @include gl-bg-transparent;
       @include gl-line-height-normal;
@@ -16,7 +17,7 @@ table.gl-table {
 
     th {
       @include gl-font-weight-bold;
-      @include gl-text-gray-900;
+      color: var(--gl-text-color-heading);
 
       &.gl-text-right > div {
         flex-direction: row-reverse;
@@ -29,22 +30,18 @@ table.gl-table {
 
       [name='sort-icon'] {
         user-select: none;
+        color: var(--gl-table-sorting-icon-color);
       }
     }
 
     td {
-      @include gl-text-gray-700;
+      color: var(--gl-text-color-default);
     }
 
     &:focus-visible {
       @include gl-focus;
       position: relative;
       z-index: 1;
-      background: $white;
-
-      &:hover {
-        background: $gray-50;
-      }
     }
   }
 
@@ -52,19 +49,22 @@ table.gl-table {
   &--sticky-header thead tr {
     position: sticky;
     top: -1px;
-    background: $white;
-    box-shadow: inset 0 -1px 0 $gray-100;
+    background-color: var(--gl-background-color-default);
+    box-shadow: inset 0 -1px 0 var(--gl-border-color-default);
   }
 
   .table-primary,
   .table-primary:hover {
+    background-color: var(--gl-feedback-info-background-color);
+
     > td {
-      @include gl-bg-blue-50;
+      background-color: var(--gl-feedback-info-background-color);
     }
   }
 
   caption {
     @include gl-pt-2;
+    color: var(--gl-text-color-subtle);
   }
 
   @mixin gl-tmp-stacked-override {
@@ -126,7 +126,7 @@ table.gl-table {
 
   &.table-hover tbody tr:hover,
   &.table-hover td.table-secondary:hover {
-    background-color: $gray-10;
+    background-color: var(--gl-table-row-background-color-hover);
   }
 
   thead th:hover {

src/components/base/table/table.vue

@@ -112,7 +112,7 @@ export default {
         <slot :name="headSlotName" v-bind="scope"
           ><span>{{ scope.label }}</span></slot
         ><template v-if="isSortable(scope)">
-          <div class="gl-ml-2 gl-w-5 gl-display-flex gl-justify-content-center gl-text-gray-900">
+          <div class="gl-ml-2 gl-w-5 gl-display-flex gl-justify-content-center">
             <span
               name="sort-icon"
               data-testid="sort-icon"

src/tokens/build/css/tokens.css

@@ -672,4 +672,6 @@
   --gl-action-border-color-disabled: var(--gl-color-neutral-100); /* Used for the border of a disabled action. */
   --gl-action-background-color-disabled: var(--gl-color-neutral-50); /* Used for the background of a disabled action. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
+  --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. */
 }

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

@@ -672,4 +672,6 @@
   --gl-action-border-color-disabled: var(--gl-color-neutral-800); /* Used for the border of a disabled action. */
   --gl-action-background-color-disabled: var(--gl-color-neutral-900); /* Used for the background of a disabled action. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
+  --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. */
 }

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

@@ -529,6 +529,8 @@ export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#434248'; // Used for the static
 export const GL_SPINNER_TRACK_COLOR_LIGHT = '#434248'; // Used for the static track (background) of a loading spinner on a dark background.
 export const GL_SPINNER_SEGMENT_COLOR_DEFAULT = '#bfbfc3'; // Used for the animated segment of a loading spinner.
 export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3'; // Used for the animated segment of a loading spinner on a dark background.
+export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#333238'; // 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_CONTROL_BACKGROUND_COLOR_DEFAULT = '#333238'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#1f1e24'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#428fdc'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.

src/tokens/build/js/tokens.js

@@ -529,6 +529,8 @@ export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#dcdcde'; // Used for the static
 export const GL_SPINNER_TRACK_COLOR_LIGHT = '#434248'; // Used for the static track (background) of a loading spinner on a dark background.
 export const GL_SPINNER_SEGMENT_COLOR_DEFAULT = '#535158'; // Used for the animated segment of a loading spinner.
 export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3'; // Used for the animated segment of a loading spinner on a dark background.
+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 = '#1f1e24'; // Used for the color of the sorting icons in the column headers.
 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_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.

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

@@ -11571,6 +11571,59 @@
       }
     }
   },
+  "table": {
+    "row": {
+      "background": {
+        "color": {
+          "hover": {
+            "value": "#333238",
+            "$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": "#fff",
+          "$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": {

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": {

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.

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.

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);

src/tokens/contextual/table.tokens.json

+{
+  "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."
+        }
+      }
+    }
+  }
+}