Use GL utility classes

app/assets/javascripts/diffs/components/diff_stats.vue

@@ -53,8 +53,8 @@ export default {
   <div
     class="diff-stats"
     :class="{
-      'is-compare-versions-header d-none d-lg-inline-flex': isCompareVersionsHeader,
-      'd-none d-sm-inline-flex': !isCompareVersionsHeader,
+      'is-compare-versions-header gl-display-none gl-lg-display-inline-flex': isCompareVersionsHeader,
+      'gl-display-none gl-sm-display-inline-flex': !isCompareVersionsHeader,
     }"
   >
     <div v-if="notDiffable" :class="fileStats.classes">
@@ -66,14 +66,14 @@ export default {
         <span class="text-secondary bold">{{ diffFilesCountText }} {{ filesText }}</span>
       </div>
       <div
-        class="diff-stats-group cgreen d-flex align-items-center"
+        class="diff-stats-group gl-text-green-600 gl-display-flex gl-align-items-center"
         :class="{ bold: isCompareVersionsHeader }"
       >
         <span>+</span>
         <span class="js-file-addition-line">{{ addedLines }}</span>
       </div>
       <div
-        class="diff-stats-group cred d-flex align-items-center"
+        class="diff-stats-group gl-text-red-500 gl-display-flex gl-align-items-center"
         :class="{ bold: isCompareVersionsHeader }"
       >
         <span>-</span>

app/assets/javascripts/diffs/utils/diff_file.js

@@ -105,9 +105,9 @@ export function stats(file) {
     valid = true;
 
     if (diff > 0) {
-      classes = 'cgreen';
+      classes = 'gl-text-green-600';
     } else if (diff < 0) {
-      classes = 'cred';
+      classes = 'gl-text-red-500';
     }
   }
 

spec/frontend/diffs/components/diff_stats_spec.js

@@ -58,7 +58,7 @@ describe('diff_stats', () => {
     it("renders the bytes changes instead of line changes when the file isn't diffable", () => {
       const content = getBytesContainer();
 
-      expect(content.classes('cgreen')).toBe(true);
+      expect(content.classes('gl-text-green-600')).toBe(true);
       expect(content.text()).toBe('+1.00 KiB (+100%)');
     });
   });

spec/frontend/diffs/utils/diff_file_spec.js

@@ -181,7 +181,7 @@ describe('diff_file utilities', () => {
       {
         changed: 1024,
         percent: 100,
-        classes: 'cgreen',
+        classes: 'gl-text-green-600',
         sign: '+',
         text: '+1.00 KiB (+100%)',
         valid: true,
@@ -197,7 +197,7 @@ describe('diff_file utilities', () => {
       {
         changed: -1024,
         percent: -100,
-        classes: 'cred',
+        classes: 'gl-text-red-500',
         sign: '',
         text: '-1.00 KiB (-100%)',
         valid: true,