Issues list: Migrate classes to design tokens

app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue

@@ -443,7 +443,7 @@ export default {
                   :data-avatar-url="author.avatarUrl"
                   :href="author.webPath"
                   data-testid="issuable-author"
-                  class="author-link js-user-link gl-text-sm !gl-text-gray-500"
+                  class="author-link js-user-link gl-text-sm !gl-text-subtle"
                   @click.stop
                 >
                   <span class="author">{{ author.name }}</span>
@@ -530,7 +530,7 @@ export default {
       </ul>
       <div
         v-gl-tooltip.bottom
-        class="gl-hidden gl-text-gray-500 sm:gl-inline-block"
+        class="gl-hidden gl-text-subtle sm:gl-inline-block"
         :title="tooltipTitle(timestamp)"
         data-testid="issuable-timestamp"
       >

app/assets/javascripts/work_items/components/work_item_type_icon.vue

@@ -33,7 +33,7 @@ export default {
     colorClass: {
       type: String,
       required: false,
-      default: 'gl-text-secondary',
+      default: 'gl-fill-icon-default',
     },
   },
   computed: {

app/assets/stylesheets/page_bundles/issuable_list.scss

@@ -20,7 +20,7 @@
 
     .issuable-info,
     .issuable-meta {
-      font-size: $gl-font-size-sm;
+      @apply gl-text-sm;
     }
 
     .issuable-meta {
@@ -53,10 +53,10 @@
     .task-status,
     .issuable-timestamp {
       font-weight: $gl-font-weight-normal;
-      color: var(--gray-500, $gl-text-color-secondary);
+      @apply gl-text-subtle;
 
       a {
-        color: var(--gl-text-color-default);
+        @apply gl-text-default;
       }
 
       // stylelint-disable-next-line gitlab/no-gl-class