Merge branch...

Merge branch '473840-use-semantic-tokens-in-app-assets-stylesheets-framework-common-scss-cred' into 'master' 

Replace cred with gl-text-red-500

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/160332



Merged-by: Andrew Fontaine <afontaine@gitlab.com>
Approved-by: Sascha Eggenberger <seggenberger@gitlab.com>
Approved-by: Nataliia Radina <nradina@gitlab.com>
Approved-by: Andrew Fontaine <afontaine@gitlab.com>
Reviewed-by: Andrew Fontaine <afontaine@gitlab.com>
Reviewed-by: Sascha Eggenberger <seggenberger@gitlab.com>
Co-authored-by: Chad Lavimoniere <clavimoniere@gitlab.com>

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

@@ -12,7 +12,7 @@ export default {
 <template>
   <span class="file-row-stats">
     <span class="cgreen"> +{{ file.addedLines }} </span>
-    <span class="cred"> -{{ file.removedLines }} </span>
+    <span data-testid="file-removed-lines" class="gl-text-red-500"> -{{ file.removedLines }} </span>
   </span>
 </template>
 

app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue

@@ -100,7 +100,7 @@ export default {
           <div data-testid="conflicts-count">
             <gl-sprintf :message="$options.i18n.commitStatSummary">
               <template #conflict>
-                <strong class="cred">{{ getConflictsCountText }}</strong>
+                <strong class="gl-text-danger">{{ getConflictsCountText }}</strong>
               </template>
               <template #sourceBranch>
                 <strong class="ref-name">{{ conflictsData.sourceBranch }}</strong>

app/assets/javascripts/vue_shared/components/file_finder/item.vue

@@ -106,7 +106,7 @@ export default {
         <span class="cgreen bold">
           <gl-icon name="file-addition" class="align-text-top" /> {{ file.addedLines }}
         </span>
-        <span class="cred bold ml-1">
+        <span class="gl-text-red-500 bold ml-1">
           <gl-icon name="file-deletion" class="align-text-top" /> {{ file.removedLines }}
         </span>
       </span>

app/assets/stylesheets/framework/common.scss

@@ -72,7 +72,6 @@
 /** COLORS **/
 .cgray { color: $gl-text-color; }
 .clgray { color: $gray-200; }
-.cred { color: $red-500; }
 .cgreen { color: $green-600; }
 .cdark { color: $gray-800; }
 

app/views/admin/health_check/show.html.haml

@@ -32,7 +32,7 @@
       = sprite_icon('check', css_class: 'cgreen')
       #{ s_('HealthCheck|Healthy') }
     - else
-      = sprite_icon('warning-solid', css_class: 'cred')
+      = sprite_icon('warning-solid', css_class: 'gl-text-danger')
       #{ s_('HealthCheck|Unhealthy') }
   - c.with_body do
     - if no_errors

app/views/admin/projects/show.html.haml

@@ -111,7 +111,7 @@
             %li{ class: 'gl-px-5!' }
               %span.light
                 = _('repository:')
-              %strong.cred
+              %strong.gl-text-danger
                 = _('does not exist')
 
           - if @project.archived?
@@ -155,7 +155,7 @@
               = _("This repository has never been checked.")
             - elsif @project.last_repository_check_failed?
               - failed_message = _("This repository was last checked %{last_check_timestamp}. The check %{strong_start}failed.%{strong_end} See the 'repocheck.log' file for error messages.")
-              - failed_message = failed_message % { last_check_timestamp: @project.last_repository_check_at.to_fs(:medium), strong_start: "<strong class='cred'>", strong_end: "</strong>" }
+              - failed_message = failed_message % { last_check_timestamp: @project.last_repository_check_at.to_fs(:medium), strong_start: "<strong class='gl-text-danger'>", strong_end: "</strong>" }
               = failed_message.html_safe
             - else
               = _("This repository was last checked %{last_check_timestamp}. The check passed.") % { last_check_timestamp: @project.last_repository_check_at.to_fs(:medium) }

app/views/admin/users/show.html.haml

@@ -61,7 +61,7 @@
           %li.two-factor-status{ class: list_item_classes }
             %span.gl-text-secondary= _('Two-factor Authentication:')
             .gl-col-span-2
-              %strong{ class: @user.two_factor_enabled? ? 'cgreen' : 'cred' }
+              %strong{ class: @user.two_factor_enabled? ? 'cgreen' : 'gl-text-danger' }
                 - if @user.two_factor_enabled?
                   = _('Enabled')
                   = link_button_to _('Disable'), disable_two_factor_admin_user_path(@user), aria: { label: _('Disable') }, data: { confirm: _('Are you sure?'), 'confirm-btn-variant': 'danger' }, method: :patch, class: 'gl-float-right', title: _('Disable Two-factor Authentication'), variant: :danger, size: :small
@@ -103,7 +103,7 @@
             %li{ class: list_item_classes }
               %span.gl-text-secondary= _('Confirmed:')
               .gl-col-span-2
-                %strong.cred= _('No')
+                %strong.gl-text-danger= _('No')
 
           %li{ class: list_item_classes }
             %span.gl-text-secondary= _('Current sign-in IP:')

app/views/projects/_issue.html.haml

@@ -30,7 +30,7 @@
               = sprite_icon('milestone', css_class: 'gl-vertical-align-text-bottom')
               = issue.milestone.title
         - if issue.due_date
-          %span.issuable-due-date.gl-hidden.sm:gl-inline-block.has-tooltip{ class: "#{'cred' if issue.overdue? && !issue.closed?}", title: _('Due date') }
+          %span.issuable-due-date.gl-hidden.sm:gl-inline-block.has-tooltip{ class: "#{'gl-text-danger' if issue.overdue? && !issue.closed?}", title: _('Due date') }
              
             = sprite_icon('calendar')
             = issue.due_date.to_fs(:medium)

app/views/projects/commit/x509/_certificate_details.html.haml

@@ -2,7 +2,7 @@
   .gpg-popover-certificate-details
     %strong= _('Certificate Subject')
     - if signature.x509_certificate.revoked?
-      %strong.cred= _('(revoked)')
+      %strong.gl-text-danger= _('(revoked)')
     %ul
       - x509_subject(signature.x509_certificate.subject, ["CN", "O"]).map do |key, value|
         %li= key + "=" + value

app/views/shared/notes/_note.html.haml

@@ -80,4 +80,4 @@
                 = note.attachment_identifier
                 = link_to delete_attachment_project_note_path(note.project, note),
                   title: _('Delete this attachment'), method: :delete, remote: true, data: { confirm: _('Are you sure you want to remove the attachment?') }, class: 'danger js-note-attachment-delete' do
-                  = sprite_icon('remove', css_class: 'cred')
+                  = sprite_icon('remove', css_class: 'gl-text-danger')

ee/app/assets/javascripts/analytics/code_review_analytics/components/merge_request_table.vue

@@ -152,7 +152,7 @@ export default {
 
     <template #cell(line_changes)="items">
       <span class="font-weight-bold cgreen"> +{{ items.item.diff_stats.additions }} </span>
-      <span class="font-weight-bold cred"> -{{ items.item.diff_stats.deletions }} </span>
+      <span class="font-weight-bold gl-text-red-500"> -{{ items.item.diff_stats.deletions }} </span>
     </template>
   </gl-table-lite>
 </template>

ee/app/views/ldap_group_links/_ldap_group_link.html.haml

@@ -7,7 +7,7 @@
       .light
         = s_("LDAP|As %{human_access} on %{provider_label} server") % { human_access: group_link_role_name(ldap_group_link), provider_label: ldap_group_link.provider_label }
     - else
-      .cred
+      .gl-text-danger
         = sprite_icon('warning-solid')
         = safe_format(s_("LDAP|Config for LDAP server %{provider} is not present in GitLab"), provider: content_tag(:code, ldap_group_link.provider))
 

ee/spec/frontend/analytics/code_review_analytics/components/__snapshots__/merge_request_table_spec.js.snap

@@ -233,7 +233,7 @@ exports[`MergeRequestTable component template matches the snapshot 1`] = `
             +504
           </span>
           <span
-            class="cred font-weight-bold"
+            class="font-weight-bold gl-text-red-500"
           >
             -10
           </span>

spec/frontend/diffs/components/file_row_stats_spec.js

@@ -24,6 +24,6 @@ describe('Diff file row stats', () => {
   });
 
   it('renders removed lines count', () => {
-    expect(wrapper.find('.cred').text()).toContain('-10');
+    expect(wrapper.find('[data-testid="file-removed-lines"]').text()).toContain('-10');
   });
 });