Upgrade Primer with translation shim for trashcan icon (github#18735)

* Revert "Revert "Upgrade Primer CSS to 16 (github#18713)""

This reverts commit c01d3e3.

* Add a hack to handle trashcan icon in translated content

content/actions/index.md

@@ -64,7 +64,7 @@ versions:
 
   <button class="js-filter-card-show-more btn btn-outline float-right" data-js-filter-card-max="6">Show more {% octicon "arrow-right" %}</button>
 
-  <div class="js-filter-card-no-results d-none py-4 text-center text-gray font-mktg">
+  <div class="js-filter-card-no-results d-none py-4 text-center color-text-secondary font-mktg">
     <div class="mb-3">{% octicon "search" width="24" %}</div>
     <h3 class="text-normal">Sorry, there is no result for <strong class="js-filter-card-value"></strong></h3>
     <p class="my-3 f4">It looks like we don't have an example that fits your filter.<br>Try another filter or add your code example</p>

content/actions/managing-workflow-runs/removing-workflow-artifacts.md

@@ -22,13 +22,13 @@ versions:
 
 {% data reusables.repositories.permissions-statement-write %}
 
-{% data reusables.github-actions.artifact-log-retention-statement %} 
+{% data reusables.github-actions.artifact-log-retention-statement %}
 
 {% data reusables.repositories.navigate-to-repo %}
 {% data reusables.repositories.actions-tab %}
 {% data reusables.repositories.navigate-to-workflow %}
 {% data reusables.repositories.view-run %}
-1. Under **Artifacts**, click {% octicon "trashcan" aria-label="The trashcan icon" %} next to the artifact you want to remove.
+1. Under **Artifacts**, click {% octicon "trash" aria-label="The trash icon" %} next to the artifact you want to remove.
     {% if currentVersion == "free-pro-team@latest" or currentVersion ver_gt "enterprise-server@3.0" or currentVersion == "github-ae@latest" %}
     ![Delete artifact drop-down menu](/assets/images/help/repository/actions-delete-artifact-updated.png)
     {% else %}

content/actions/reference/environments.md

@@ -83,7 +83,7 @@ Deleting an environment will delete all secrets and protection rules associated
 {% data reusables.repositories.navigate-to-repo %}
 {% data reusables.repositories.sidebar-settings %}
 {% data reusables.github-actions.sidebar-environment %}
-1. Next the the environment that you want to delete, click {% octicon "trashcan" aria-label="The trashcan icon" %}.
+1. Next the the environment that you want to delete, click {% octicon "trash" aria-label="The trash icon" %}.
 2. Click **I understand, delete this environment**.
 
 {% if currentVersion == "free-pro-team@latest" or currentVersion == "github-ae@next" or currentVersion ver_gt "enterprise-server@3.1" %}You can also delete environments through the REST API. For more information, see "[Environments](/rest/reference/repos#environments)."{% endif %}

content/discussions/index.md

@@ -47,7 +47,7 @@ versions:
   {% if discussionsCommunityExamples.length > 6 %}
     <button class="js-filter-card-show-more btn btn-outline float-right" data-js-filter-card-max="6">Show more {% octicon "arrow-right" %}</button>
   {% endif %}
-  <div class="js-filter-card-no-results d-none py-4 text-center text-gray font-mktg">
+  <div class="js-filter-card-no-results d-none py-4 text-center color-text-secondary font-mktg">
     <div class="mb-3">{% octicon "search" width="24" %}</div>
     <h3 class="text-normal">Sorry, there is no result for <strong class="js-filter-card-value"></strong></h3>
     <p class="my-3 f4">It looks like we don't have an example that fits your filter.<br>Try another filter or add your code example</p>

content/github/administering-a-repository/managing-teams-and-people-with-access-to-your-repository.md

@@ -52,8 +52,8 @@ For more information about repository permission levels, see "[Permission levels
 {% data reusables.repositories.navigate-to-repo %}
 {% data reusables.repositories.sidebar-settings %}
 {% data reusables.repositories.navigate-to-manage-access %}
-4. Under "Manage access", find the team or person whose access you'd like to remove, then click {% octicon "trashcan" aria-label="The trashcan icon" %}.
-  ![Trashcan icon for removing access](/assets/images/help/repository/manage-access-remove.png)
+4. Under "Manage access", find the team or person whose access you'd like to remove, then click {% octicon "trash" aria-label="The trash icon" %}.
+  ![trash icon for removing access](/assets/images/help/repository/manage-access-remove.png)
 
 ### Further reading
 

content/github/collaborating-with-issues-and-pull-requests/creating-and-deleting-branches-within-your-repository.md

@@ -37,7 +37,7 @@ If the branch you want to delete is associated with an open pull request, you mu
 
 {% data reusables.repositories.navigate-to-repo %}
 {% data reusables.repositories.navigate-to-branches %}
-1. Scroll to the branch that you want to delete, then click {% octicon "trashcan" aria-label="The trashcan icon to delete the branch" %}.
+1. Scroll to the branch that you want to delete, then click {% octicon "trash" aria-label="The trash icon to delete the branch" %}.
     ![delete the branch](/assets/images/help/branches/branches-delete.png)
 
 {% if currentVersion == "free-pro-team@latest" or currentVersion == "github-ae@latest" or currentVersion ver_gt "enterprise-server@2.21" %}

content/github/managing-files-in-a-repository/deleting-files-in-a-repository.md

@@ -25,7 +25,7 @@ If the file{% if currentVersion == "free-pro-team@latest" or currentVersion ver_
 ### Deleting a file
 
 1. Browse to the file in your repository that you want to delete.
-2. At the top of the file, click {% octicon "trashcan" aria-label="The trashcan icon" %}.
+2. At the top of the file, click {% octicon "trash" aria-label="The trash icon" %}.
 {% data reusables.files.write_commit_message %}
 {% data reusables.files.choose-commit-email %}
 {% data reusables.files.choose_commit_branch %}

content/github/setting-up-and-managing-your-enterprise/connecting-an-azure-subscription-to-your-enterprise.md

@@ -9,7 +9,7 @@ versions:
 ---
 ### About Azure subscriptions and {% data variables.product.product_name %}
 
-{% data reusables.enterprise-accounts.billing-microsoft-ea-overview %} For more information, see "[About billing for {% data variables.product.prodname_actions %}](/github/setting-up-and-managing-billing-and-payments-on-github/about-billing-for-github-actions) and "[About billing for {% data variables.product.prodname_registry %}](/github/setting-up-and-managing-billing-and-payments-on-github/about-billing-for-github-packages)." 
+{% data reusables.enterprise-accounts.billing-microsoft-ea-overview %} For more information, see "[About billing for {% data variables.product.prodname_actions %}](/github/setting-up-and-managing-billing-and-payments-on-github/about-billing-for-github-actions) and "[About billing for {% data variables.product.prodname_registry %}](/github/setting-up-and-managing-billing-and-payments-on-github/about-billing-for-github-packages)."
 
 After you connect an Azure subscription, you can also manage your spending limit. For information on managing and changing your account's spending limit, see "[Managing your spending limit for {% data variables.product.prodname_registry %}](/github/setting-up-and-managing-billing-and-payments-on-github/managing-your-spending-limit-for-github-packages)" and "[Managing your spending limit for {% data variables.product.prodname_actions %}](/github/setting-up-and-managing-billing-and-payments-on-github/managing-your-spending-limit-for-github-actions)."
 
@@ -23,7 +23,7 @@ To connect your Azure subscription, you must have owner permissions to the subsc
 {% data reusables.enterprise-accounts.payment-information-tab %}
 1. Under "Payment Information", click **Add Azure Subscription**.
 1. To sign in to your Microsoft account, follow the prompts.
-1. Review the "Permissions requested" prompt. If you agree with the terms, click **Accept**. 
+1. Review the "Permissions requested" prompt. If you agree with the terms, click **Accept**.
 1. Under "Select a subscription", select the Azure Subscription ID that you want to connect to your enterprise.
 1. Click **Connect**.
 
@@ -35,5 +35,5 @@ After you disconnect your Azure subscription from your enterprise account, your
 {% data reusables.enterprise-accounts.settings-tab %}
 {% data reusables.enterprise-accounts.billing-tab %}
 {% data reusables.enterprise-accounts.payment-information-tab %}
-1. Under "Azure subscription", to the right of the subscription ID you want to disconnect, click **{% octicon "trashcan" aria-label="The trashcan icon" %}**.
+1. Under "Azure subscription", to the right of the subscription ID you want to disconnect, click **{% octicon "trash" aria-label="The trash icon" %}**.
 1. Review the prompt, then click **Remove**.

content/github/setting-up-and-managing-your-github-user-account/changing-your-primary-email-address.md

@@ -22,7 +22,7 @@ topics:
    ![Add another email address button](/assets/images/help/settings/add_another_email_address.png)
 4. Under "Primary email address", use the drop-down menu to click the email address you'd like to set as your primary email address, and click **Save**.
    ![Set as primary button](/assets/images/help/settings/set_as_primary_email.png)
-5. To remove the old email address from your account, next to the old email, click {% octicon "trashcan" aria-label="The trashcan symbol" %}.
+5. To remove the old email address from your account, next to the old email, click {% octicon "trash" aria-label="The trash symbol" %}.
 {% if currentVersion == "free-pro-team@latest" %}
 6. Verify your new primary email address. Without a verified email address, you won't be able to use all of {% data variables.product.product_name %}'s features. For more information, see "[Verifying your email address](/articles/verifying-your-email-address)."
 {% endif %}

content/github/setting-up-and-managing-your-github-user-account/removing-a-collaborator-from-a-personal-repository.md

@@ -28,7 +28,7 @@ While forks of private repositories are deleted when a collaborator is removed,
 {% data reusables.repositories.sidebar-settings %}
 {% if currentVersion == "free-pro-team@latest" %}
 {% data reusables.repositories.navigate-to-manage-access %}
-4. To the right of the collaborator you want to remove, click {% octicon "trashcan" aria-label="The trashcan icon" %}.
+4. To the right of the collaborator you want to remove, click {% octicon "trash" aria-label="The trash icon" %}.
   ![Button to remove collaborator](/assets/images/help/repository/collaborator-remove.png)
 {% else %}
 3. In the left sidebar, click **Collaborators & teams**.

content/graphql/overview/breaking-changes.md

@@ -27,7 +27,7 @@ We'll announce upcoming breaking changes at least three months before making cha
 
 {% for change in date[1] %}
 <ul>
-<li><span class="border rounded-1 m-1 p-1 {% if change.criticality == 'breaking' %}border-red bg-red-light{% else %}border-purple bg-purple-light{% endif %}">{% if change.criticality == 'breaking' %}Breaking{% else %}Dangerous{% endif %}</span> A change will be made to <code>{{ change.location }}</code>.
+<li><span class="border rounded-1 m-1 p-1 {% if change.criticality == 'breaking' %}color-border-danger color-bg-danger{% else %}color-border-info color-bg-info{% endif %}">{% if change.criticality == 'breaking' %}Breaking{% else %}Dangerous{% endif %}</span> A change will be made to <code>{{ change.location }}</code>.
 
 <p><b>Description:</b> {{ change.description }}</p>
 

content/insights/installing-and-configuring-github-insights/managing-contributors-and-teams.md

@@ -80,7 +80,7 @@ You can merge contributors manually or automatically, based on contributors {% d
 
 ### Managing teams in {% data variables.product.prodname_insights %}
 
-There are two types of teams in {% data variables.product.prodname_insights %}: teams imported from {% data variables.product.product_name %} and custom teams. 
+There are two types of teams in {% data variables.product.prodname_insights %}: teams imported from {% data variables.product.product_name %} and custom teams.
 
 When an organization is added to {% data variables.product.prodname_insights %}, all of the organization's teams are imported from {% data variables.product.product_name %}. You can search and filter by these teams in {% data variables.product.prodname_insights %}. You can manage the teams in {% data variables.product.product_name %}.
 
@@ -110,8 +110,8 @@ You can create and manage custom teams in {% data variables.product.prodname_ins
 {% data reusables.github-insights.settings-tab %}
 {% data reusables.github-insights.teams-tab %}
 {% data reusables.github-insights.edit-team %}
-3. To the right of the contributor you'd like to remove, click {% octicon "trashcan" aria-label="The trashcan icon" %}.
-  ![Trashcan button](/assets/images/help/insights/contributor-trashcan.png)
+3. To the right of the contributor you'd like to remove, click {% octicon "trash" aria-label="The trash icon" %}.
+  ![trash button](/assets/images/help/insights/contributor-trashcan.png)
 
 #### Renaming a custom team
 

content/insights/installing-and-configuring-github-insights/managing-events.md

@@ -32,6 +32,6 @@ After you create an event in {% data variables.product.prodname_insights %}, any
 
 {% data reusables.github-insights.settings-tab %}
 {% data reusables.github-insights.events-tab %}
-3. To the right of the event you want to delete, click **{% octicon "trashcan" aria-label="The trashcan icon" %}**.
+3. To the right of the event you want to delete, click **{% octicon "trash" aria-label="The trash icon" %}**.
   ![Trash can button](/assets/images/help/insights/trashcan-button.png)
 4. Click **Confirm**.

content/organizations/managing-access-to-your-organizations-project-boards/managing-team-access-to-an-organization-project-board.md

@@ -52,5 +52,5 @@ If a team's access to a project board is inherited from a parent team, you must
 {% data reusables.organizations.specific_team %}
 4. Above the team's conversation, click {% octicon "project" aria-label="The Projects icon" %} **Projects**.
   ![The team repositories tab](/assets/images/help/organizations/team-project-board-button.png)
-5. To change permissions levels, to the right of the project board you want to update, use the drop-down. To remove a project board, click **{% octicon "trashcan" aria-label="The trashcan icon" %}**.
+5. To change permissions levels, to the right of the project board you want to update, use the drop-down. To remove a project board, click **{% octicon "trash" aria-label="The trash icon" %}**.
   ![Remove a project board from your team trash button](/assets/images/help/organizations/trash-button.png)

includes/all-articles-category.html

@@ -22,7 +22,7 @@ <h4 class="mb-3"><a href="{{ maptopic.href }}">{{ maptopic.title }}</a></h4>
             {% endfor %}
             {% assign numArticles = maptopic.childArticles | obj_size %}
             {% if numArticles > maxArticles %}
-              <button class="js-all-articles-show-more btn-link link-gray">Show {{ numArticles | minus: maxArticles }} more {% octicon "chevron-up" class="v-align-text-bottom" %}</button>
+              <button class="js-all-articles-show-more btn-link Link--secondary">Show {{ numArticles | minus: maxArticles }} more {% octicon "chevron-up" class="v-align-text-bottom" %}</button>
             {% endif %}
           </ul>
         </div>

includes/all-articles-product.html

@@ -21,7 +21,7 @@ <h4 class="mb-3"><a href="{{ category[1].href }}">{{ category[1].title }}</a></h
                     </a>
                   </li>
                   {% if numArticles > maxArticles %}
-                    <button class="js-all-articles-show-more btn-link link-gray">Show {{ numArticles | minus: maxArticles }} more {% octicon "chevron-up" class="v-align-text-bottom" %}</button>
+                    <button class="js-all-articles-show-more btn-link Link--secondary">Show {{ numArticles | minus: maxArticles }} more {% octicon "chevron-up" class="v-align-text-bottom" %}</button>
                   {% endif %}
                 {% endunless %}
               {% endfor %}
@@ -34,7 +34,7 @@ <h4 class="mb-3"><a href="{{ category[1].href }}">{{ category[1].title }}</a></h
               {% endfor %}
             </ul>
             {% if numArticles > maxArticles %}
-              <button class="js-all-articles-show-more btn-link link-gray">Show {{ numArticles | minus: maxArticles }} more {% octicon "chevron-up" class="v-align-text-bottom" %}</button>
+              <button class="js-all-articles-show-more btn-link Link--secondary">Show {{ numArticles | minus: maxArticles }} more {% octicon "chevron-up" class="v-align-text-bottom" %}</button>
             {% endif %}
           {% endif %}
         </div>

includes/article-cards.html

@@ -5,7 +5,7 @@ <h2 class="mb-3 font-mktg">{% data ui.product_sublanding.all_guides %}</h2>
 
   <form class="mt-2 mb-5 d-flex d-flex">
     <div>
-      <label for="type" class="text-uppercase f6 text-gray d-block">{% data ui.product_sublanding.filters.type %}</label>
+      <label for="type" class="text-uppercase f6 color-text-secondary d-block">{% data ui.product_sublanding.filters.type %}</label>
       <select class="form-select js-filter-card-filter-dropdown f4 text-bold border-0 rounded-0 border-top box-shadow-none pl-0 js-filter-card-filter-dropdown" name="type" aria-label="guide types">
         <option value="">{% data ui.product_sublanding.filters.all %}</option>
         {% for type in site.data.ui.product_sublanding.guide_types %}
@@ -14,7 +14,7 @@ <h2 class="mb-3 font-mktg">{% data ui.product_sublanding.all_guides %}</h2>
       </select>
     </div>
     <div class="mx-4">
-      <label for="topic" class="text-uppercase f6 text-gray d-block">{% data ui.product_sublanding.filters.topic %}</label>
+      <label for="topic" class="text-uppercase f6 color-text-secondary d-block">{% data ui.product_sublanding.filters.topic %}</label>
       <select class="form-select js-filter-card-filter-dropdown f4 text-bold border-0 rounded-0 border-top box-shadow-none pl-0 js-filter-card-filter-dropdown" name="topics" aria-label="guide topics">
         <option value="">{% data ui.product_sublanding.filters.all %}</option>
         {% for topic in page.allTopics %}
@@ -39,12 +39,12 @@ <h2 class="mb-3 font-mktg">{% data ui.product_sublanding.all_guides %}</h2>
       {{ link_card | replace: "<display condition>", card_display_class }}
     {% endfor %}
 
-    <button class="col-12 mt-5 text-center text-bold text-blue btn-link js-filter-card-show-more" data-js-filter-card-max="{{ maxArticles }}">
+    <button class="col-12 mt-5 text-center text-bold color-text-link btn-link js-filter-card-show-more" data-js-filter-card-max="{{ maxArticles }}">
       {% data ui.product_sublanding.load_more %}
     </button>
 
-    <div class="js-filter-card-no-results d-none py-4 text-center text-gray">
+    <div class="js-filter-card-no-results d-none py-4 text-center color-text-secondary">
       <h4 class="text-normal">{% data ui.product_sublanding.no_result %}</h4>
     </div>
   </div>
-</div>
+</div>

includes/article-version-switcher.html

@@ -6,15 +6,15 @@
       <svg class="arrow ml-1" width="14px" height="8px" viewBox="0 0 14 8" xml:space="preserve" fill="none" stroke="#1277eb"><path d="M1,1l6.2,6L13,1"></path></svg>
     </summary>
 
-    <div class="nav-dropdown position-absolute bg-white rounded-1 px-4 py-3 top-7 box-shadow-large" style="z-index: 6; width: 210px;">
+    <div class="nav-dropdown position-absolute color-bg-primary rounded-1 px-4 py-3 top-7 color-shadow-large" style="z-index: 6; width: 210px;">
       {% for permalink in page.permalinks %}
       <a
       href="{{ permalink.href }}"
-      class="d-block py-2 {% if currentPath == permalink.href %}link-blue active{% else %}link-gray-dark no-underline{% endif %}"
+      class="d-block py-2 {% if currentPath == permalink.href %}link-blue active{% else %}Link--primary no-underline{% endif %}"
       >
       {{ allVersions[permalink.pageVersion].versionTitle }}</a>
       {% endfor %}
-      <a class="f6 no-underline text-gray-light pt-1" href="/enterprise-server-releases">See all Enterprise releases</a>
+      <a class="f6 no-underline color-text-tertiary pt-1" href="/enterprise-server-releases">See all Enterprise releases</a>
     </div>
   </details>
 {% endif %}