Merge branch...

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

Replace fgray with gl-fill-gray-500 and remove fwhite

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



Merged-by: Paul Slaughter <pslaughter@gitlab.com>
Approved-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Approved-by: Julia Miocene <jmiocene@gitlab.com>
Approved-by: Juliet Wanjohi <jwanjohi@gitlab.com>
Approved-by: Heinrich Lee Yu <heinrich@gitlab.com>
Approved-by: Briley Sandlin <bsandlin@gitlab.com>
Approved-by: Paul Slaughter <pslaughter@gitlab.com>
Co-authored-by: Chad Lavimoniere <clavimoniere@gitlab.com>

app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue

@@ -43,6 +43,6 @@ export default {
     data-track-action="open_review_app"
     data-track-label="review_app"
   >
-    {{ display.text }} <gl-icon class="fgray" name="external-link" />
+    {{ display.text }} <gl-icon class="gl-fill-gray-500" name="external-link" />
   </gl-button>
 </template>

app/assets/stylesheets/framework/common.scss

@@ -75,9 +75,6 @@
 .cgreen { color: $green-600; }
 .cdark { color: $gray-800; }
 
-.fwhite { fill: $white; }
-.fgray { fill: $gray-500; }
-
 .text-plain,
 .text-plain:hover {
   color: $gl-text-color;

app/views/users/_profile_sidebar.html.haml

@@ -30,21 +30,21 @@
               %h2.gl-font-base.gl-mb-2.gl-mt-4= s_('UserProfile|Info')
               - if work_information(@user).present?
                 .gl-display-flex.gl-gap-2.gl-mb-2
-                  = sprite_icon('work', css_class: 'fgray gl-mt-1 flex-shrink-0')
+                  = sprite_icon('work', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
                   %span
                     = work_information(@user, with_schema_markup: true)
               - if @user.location.present?
                 .gl-display-flex.gl-gap-2.gl-mb-2
-                  = sprite_icon('location', css_class: 'fgray gl-mt-1 flex-shrink-0')
+                  = sprite_icon('location', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
                   %span{ itemprop: 'addressLocality' }
                     = @user.location
               - if user_local_time.present?
                 .gl-display-flex.gl-gap-2.gl-mb-2{ data: { testid: 'user-local-time' } }
-                  = sprite_icon('clock', css_class: 'fgray gl-mt-1 flex-shrink-0')
+                  = sprite_icon('clock', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
                   %span
                     = user_local_time
               .gl-display-flex.gl-gap-2.gl-mb-2
-                = sprite_icon('calendar', css_class: 'fgray gl-mt-1 flex-shrink-0')
+                = sprite_icon('calendar', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
                 %span= s_('Member since %{date}') % { date: l(@user.created_at.to_date, format: :long) }
 
             - if @user.website_url.present? || display_public_email?(@user) || @user.skype.present? || @user.linkedin.present? || @user.twitter.present? || @user.mastodon.present? || @user.discord.present?
@@ -52,29 +52,29 @@
                 %h2.gl-font-base.gl-mb-2.gl-mt-4= s_('UserProfile|Contact')
                 - if @user.website_url.present?
                   .gl-display-flex.gl-gap-2.gl-mb-2
-                    = sprite_icon('earth', css_class: 'fgray gl-mt-1 flex-shrink-0')
+                    = sprite_icon('earth', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
                     = link_to @user.short_website_url, @user.full_website_url, class: 'gl-text-gray-900', target: '_blank', rel: 'me noopener noreferrer nofollow', itemprop: 'url'
                 - if display_public_email?(@user)
                   .gl-display-flex.gl-gap-2.gl-mb-2
-                    = sprite_icon('mail', css_class: 'fgray gl-mt-1 flex-shrink-0')
+                    = sprite_icon('mail', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
                     = link_to @user.public_email, "mailto:#{@user.public_email}", class: 'gl-text-gray-900', itemprop: 'email'
                 - if @user.skype.present?
                   .gl-display-flex.gl-gap-2.gl-mb-2
-                    = sprite_icon('skype', css_class: 'fgray gl-mt-1 flex-shrink-0')
+                    = sprite_icon('skype', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
                     = link_to @user.skype, "skype:#{@user.skype}", class: 'gl-text-gray-900', title: "Skype"
                 - if @user.linkedin.present?
                   .gl-display-flex.gl-gap-2.gl-mb-2
-                    = sprite_icon('linkedin', css_class: 'fgray gl-mt-1 flex-shrink-0')
+                    = sprite_icon('linkedin', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
                     = link_to linkedin_name(@user), linkedin_url(@user), class: 'gl-text-gray-900', title: "LinkedIn", target: '_blank', rel: 'noopener noreferrer nofollow'
                 - if @user.twitter.present?
                   .gl-display-flex.gl-gap-2.gl-mb-2
-                    = sprite_icon('x', css_class: 'fgray gl-mt-1 flex-shrink-0')
+                    = sprite_icon('x', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
                     = link_to @user.twitter, twitter_url(@user), class: 'gl-text-gray-900', title: _("X (formerly Twitter)"), target: '_blank', rel: 'noopener noreferrer nofollow'
                 - if @user.mastodon.present?
                   .gl-display-flex.gl-gap-2.gl-mb-2
-                    = sprite_icon('mastodon', css_class: 'fgray gl-mt-1 flex-shrink-0')
+                    = sprite_icon('mastodon', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
                     = link_to @user.mastodon, mastodon_url(@user), class: 'gl-text-gray-900', title: "Mastodon", target: '_blank', rel: 'noopener noreferrer nofollow'
                 - if @user.discord.present?
                   .gl-display-flex.gl-gap-2.gl-mb-2
-                    = sprite_icon('discord', css_class: 'fgray gl-mt-1 flex-shrink-0')
+                    = sprite_icon('discord', css_class: 'gl-fill-gray-500 gl-mt-1 flex-shrink-0')
                     = link_to @user.discord, discord_url(@user), class: 'gl-text-gray-900', title: "Discord", target: '_blank', rel: 'noopener noreferrer nofollow'

ee/spec/frontend/environments_dashboard/components/__snapshots__/environment_header_spec.js.snap

@@ -90,7 +90,7 @@ exports[`Environment Header renders name and link to app matches the snapshot 1`
       View app
       <svg
         aria-hidden="true"
-        class="fgray gl-fill-current gl-icon s16"
+        class="gl-fill-current gl-fill-gray-500 gl-icon s16"
         data-testid="external-link-icon"
         role="img"
       >