Show epic colour highlight on Epic boards

What does this MR do and why?

Blocked until !90975 (merged) has been merged

Adds the epic colour highlight to epics cards on the epic boards.

Screenshots or screen recordings

FF off (existing)	FF on

Old changes

FF off (default blue)	FF off (grey fallback)	FF on

How to set up and validate locally

• Enable epic_color_highlight feature flag (Feature.enable(:epic_color_highlight))
• Create/update some Epics to use some colours
• Visit the epic board

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #7641 (closed)

app/assets/javascripts/boards/components/board_card.vue

@@ -49,16 +49,14 @@ export default {
       return !this.disabled && this.item.id && !this.item.isLoading;
     },
     cardStyle() {
-      if (this.item.color) {
-        // eslint-disable-next-line @gitlab/require-i18n-strings
-        return `--epic-color: ${this.item.color}`;
-      }
-
-      return '';
+      return this.isColorful && this.item.color ? { borderColor: this.item.color } : '';
     },
     isColorful() {
       return gon?.features?.epicColorHighlight;
     },
+    colorClass() {
+      return this.isColorful ? 'gl-pl-4 gl-border-l-solid gl-border-4' : '';
+    },
   },
   methods: {
     ...mapActions(['toggleBoardItemMultiSelection', 'toggleBoardItem']),
@@ -81,14 +79,16 @@ export default {
 <template>
   <li
     data-qa-selector="board_card"
-    :class="{
-      'multi-select': multiSelectVisible,
-      'gl-cursor-grab': isDraggable,
-      'is-disabled': isDisabled,
-      'is-active': isActive,
-      'gl-cursor-not-allowed gl-bg-gray-10': item.isLoading,
-      colorful: isColorful,
-    }"
+    :class="[
+      {
+        'multi-select': multiSelectVisible,
+        'gl-cursor-grab': isDraggable,
+        'is-disabled': isDisabled,
+        'is-active': isActive,
+        'gl-cursor-not-allowed gl-bg-gray-10': item.isLoading,
+      },
+      colorClass,
+    ]"
     :index="index"
     :data-item-id="item.id"
     :data-item-iid="item.iid"