Upgrade Primer CSS to version 17, removing marketing styles (#20965)

* Package updates

* Fix up things that look broken

* Add to utils

* Lead now just sets font size, just use f3 where needed

* Update package-lock.json

* Update index.tsx

* Delete bump-link.scss

* Update trigger-error.js

* Update components/GenericError.tsx

Co-authored-by: Ash Guillaume <10384315+ashygee@users.noreply.github.com>

* Update ArticlePage.tsx

* Update ActionBar.tsx

* Changes from meeting

* Found a few more monos

* Fix from a merge conflict

* Missed a few f3s

* Update SubLandingHero.tsx

* Bye gradients

* Match up breadcrumbs

* Update SubLandingHero.tsx

* Update lists.scss

Co-authored-by: Ash Guillaume <10384315+ashygee@users.noreply.github.com>

components/Breadcrumbs.tsx

@@ -9,10 +9,7 @@ export type BreadcrumbT = {
   href?: string
 }
 
-type Props = {
+export const Breadcrumbs = () => {
-  variant?: 'default' | 'large'
-}
-export const Breadcrumbs = ({ variant = 'default' }: Props) => {
   const router = useRouter()
   const pathWithLocale = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string
   const { breadcrumbs } = useMainContext()
@@ -44,7 +41,6 @@ export const Breadcrumbs = ({ variant = 'default' }: Props) => {
               title={title}
               className={cx(
                 'd-inline-block px-2',
-                variant === 'large' && 'text-uppercase text-mono',
                 pathWithLocale === breadcrumb.href && 'color-text-tertiary'
               )}
             >

components/GenericError.tsx

@@ -20,8 +20,8 @@ export function GenericError() {
       <div className="container-xl p-responsive py-9 width-full flex-1">
         <article className="col-md-10 col-lg-7 mx-auto">
           <h1 className="mb-3 pb-3 border-bottom">Ooops!</h1>
-          <p className="lead-mktg">It looks like something went wrong.</p>
+          <p className="f2 color-text-secondary">It looks like something went wrong.</p>
-          <p className="lead-mktg">
+          <p className="f3">
             We track these errors automatically, but if the problem persists please feel free to
             contact us.
           </p>
@@ -65,7 +65,7 @@ export const SimpleHeader = () => {
 
           <Link href={`/${router.locale}`}>
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <a className="h4-mktg color-text-primary no-underline no-wrap pl-2">GitHub Docs</a>
+            <a className="h4 color-text-primary no-underline no-wrap pl-2">GitHub Docs</a>
           </Link>
         </div>
       </header>

components/Search.tsx

@@ -189,7 +189,10 @@ export function Search({
                       dangerouslySetInnerHTML={{ __html: breadcrumbs }}
                     />
                     <div
-                      className={cx(styles.searchResultTitle, 'd-block h4-mktg color-text-primary')}
+                      className={cx(
+                        styles.searchResultTitle,
+                        'd-block f4 font-weight-semibold color-text-primary'
+                      )}
                       dangerouslySetInnerHTML={{
                         __html: heading ? `${title}: ${heading}` : title,
                       }}

components/article/ArticlePage.tsx

@@ -63,7 +63,11 @@ export const ArticlePage = () => {
                 </Callout>
               )}
 
-              {intro && <MarkdownContent className="lead-mktg mb-3">{intro}</MarkdownContent>}
+              {intro && (
+                <MarkdownContent className="f2 color-text-secondary mb-3" data-testid="lead">
+                  {intro}
+                </MarkdownContent>
+              )}
 
               {permissions && (
                 <div

components/article/ArticleVersionPicker.tsx

@@ -25,7 +25,7 @@ export const ArticleVersionPicker = () => {
       `}
       data-testid="article-version-picker"
     >
-      <summary className="f4 h5-mktg btn-outline-mktg btn-mktg p-2 outline-none">
+      <summary className="btn btn-outline p-2 outline-none">
         <span className="d-md-none d-xl-inline-block">{t('article_version')}</span>{' '}
         {allVersions[currentVersion].versionTitle}
         <Dropdown.Caret />

components/article/LearningTrackNav.tsx

@@ -10,7 +10,7 @@ export function LearningTrackNav({ track }: Props) {
   return (
     <div
       data-testid="learning-track-nav"
-      className="py-3 px-4 rounded color-bg-primary border-gradient--purple-pink d-flex flex-justify-between"
+      className="py-3 px-4 rounded color-bg-primary border d-flex flex-justify-between"
     >
       <span className="d-flex flex-column">
         {prevGuide && (

components/landing/ArticleList.tsx

@@ -28,8 +28,8 @@ export const ArticleList = ({
           <h3
             className={cx(
               titleVariant === 'large'
-                ? 'f4 text-normal text-mono text-uppercase'
+                ? 'f4 font-weight-semibold'
-                : 'f5 text-normal text-mono underline-dashed color-text-secondary'
+                : 'f5 text-normal underline-dashed color-text-secondary'
             )}
           >
             {title}

components/landing/CodeExamples.tsx

@@ -65,7 +65,7 @@ export const CodeExamples = () => {
       {isSearching && searchResults.length === 0 && (
         <div
           data-testid="code-examples-no-results"
-          className="py-4 text-center color-text-secondary font-mktg"
+          className="py-4 text-center color-text-secondary"
         >
           <div className="mb-3">
             <SearchIcon size={24} />{' '}

components/landing/LandingHero.tsx

@@ -22,16 +22,12 @@ export const LandingHero = () => {
   return (
     <header className="d-lg-flex gutter-lg mb-6">
       <div className={cx(product_video && 'col-12 col-lg-6 mb-3 mb-lg-0')}>
-        <span className="text-mono color-text-secondary">Product</span>
+        <h1 className="mb-3">
-        <h1 className="mb-3 font-mktg">
           {shortTitle}{' '}
           {beta_product && <span className="Label Label--success v-align-middle">Beta</span>}
         </h1>
 
-        <div
+        <div className="f2 color-text-secondary" dangerouslySetInnerHTML={{ __html: intro }} />
-          className="lead-mktg color-text-secondary"
-          dangerouslySetInnerHTML={{ __html: intro }}
-        />
 
         {introLinks &&
           Object.entries(introLinks)
@@ -46,7 +42,7 @@ export const LandingHero = () => {
                 <FullLink
                   key={link}
                   href={link}
-                  className={cx('btn-mktg bt-large f4 mt-3 mr-3', i !== 0 && 'btn-outline-mktg')}
+                  className={cx('btn btn-large f4 mt-3 mr-3 ', i === 0 && 'btn-primary-matte')}
                 >
                   {t(key)}
                 </FullLink>

components/landing/LandingSection.tsx

@@ -11,7 +11,7 @@ export const LandingSection = ({ title, children, className, sectionLink, descri
   return (
     <div className={cx('container-xl px-3 px-md-6', className)} id={sectionLink}>
       {title && (
-        <h2 className={cx('font-mktg h1 color-text-primary', !description ? 'mb-3' : 'mb-4')}>
+        <h2 className={cx('h1 color-text-primary', !description ? 'mb-3' : 'mb-4')}>
           {sectionLink ? (
             <a className="color-unset" href={`#${sectionLink}`}>
               {title}
@@ -23,7 +23,7 @@ export const LandingSection = ({ title, children, className, sectionLink, descri
       )}
       {description && (
         <div
-          className="lead-mktg color-text-secondary f4"
+          className="color-text-secondary f4"
           dangerouslySetInnerHTML={{ __html: description }}
         />
       )}

components/landing/TocLanding.tsx

@@ -22,7 +22,7 @@ export const TocLanding = () => {
         <ArticleGridLayout className="mt-7">
           <ArticleTitle>{title}</ArticleTitle>
 
-          <div className="lead-mktg">
+          <div className="f2 color-text-secondary">
             <p>{introPlainText}</p>
           </div>
 

components/page-header/Header.tsx

@@ -65,7 +65,7 @@ export const Header = () => {
 
               <Link
                 href={`/${router.locale}`}
-                className="h4-mktg color-text-primary no-underline no-wrap pl-2"
+                className="f4 font-weight-semibold color-text-primary no-underline no-wrap pl-2"
               >
                 {t('github_docs')}
               </Link>
@@ -92,9 +92,7 @@ export const Header = () => {
               )}
             >
               <div className="mt-3 mb-2">
-                <h4 className="text-mono f5 text-normal color-text-secondary">
+                <h4 className="f5 text-normal color-text-secondary">{t('explore_by_product')}</h4>
-                  {t('explore_by_product')}
-                </h4>
 
                 <ProductPicker />
               </div>

components/playground/editor/ActionBar.tsx

@@ -1,4 +1,4 @@
-import { ClippyIcon, CheckIcon } from '@primer/octicons-react'
+import { CopyIcon, CheckIcon } from '@primer/octicons-react'
 import { Tooltip } from '@primer/components'
 
 import useClipboard from 'components/hooks/useClipboard'
@@ -32,7 +32,7 @@ export const ActionBar = ({ code }: Props) => {
           aria-label={isCopied ? 'Copied!' : 'Copy to clipboard'}
         >
           <button className="btn-octicon" onClick={() => setCopied()}>
-            {isCopied ? <CheckIcon /> : <ClippyIcon />}
+            {isCopied ? <CheckIcon /> : <CopyIcon />}
           </button>
         </Tooltip>
       </div>

components/release-notes/GHAEReleaseNotes.tsx

@@ -84,7 +84,7 @@ const CollapsibleReleaseSection = ({
         <summary className="px-3 py-4 my-0 d-flex flex-items-center flex-justify-between outline-none">
           {release.version}
           <div className="d-flex">
-            <span className="color-text-tertiary text-mono text-small text-normal mr-1">
+            <span className="color-text-tertiary text-small text-normal mr-1">
               {release.patches.length} releases
             </span>
             <ChevronDownIcon className={isOpen ? 'rotate-180' : ''} />

components/release-notes/GHESReleaseNotes.tsx

@@ -121,7 +121,7 @@ export function GHESReleaseNotes({ context }: Props) {
                       href={releaseLink}
                     >
                       {release.version}
-                      <span className="color-text-tertiary text-mono text-small text-normal mr-1">
+                      <span className="color-text-tertiary text-small text-normal mr-1">
                         {release.patches.length} releases
                       </span>
                     </Link>
@@ -163,7 +163,7 @@ const CollapsibleReleaseSection = ({
         <summary className="px-3 py-4 my-0 d-flex flex-items-center flex-justify-between outline-none">
           {release.version}
           <div className="d-flex">
-            <span className="color-text-tertiary text-mono text-small text-normal mr-1">
+            <span className="color-text-tertiary text-small text-normal mr-1">
               {release.patches.length} releases
             </span>
             <ChevronDownIcon className={isOpen ? 'rotate-180' : ''} />

components/release-notes/PatchNotes.tsx

@@ -48,7 +48,7 @@ export function PatchNotes({ patch, withReleaseNoteLabel }: Props) {
             {withReleaseNoteLabel && (
               <div className="col-12 col-xl-3 mb-5">
                 <span
-                  className="px-3 py-2 text-small text-bold text-uppercase text-mono color-text-inverse"
+                  className="px-3 py-2 text-small text-bold text-uppercase color-text-inverse"
                   style={{ backgroundColor: primaryColor }}
                 >
                   {SectionToLabelMap[key] || 'INVALID SECTION'}

components/sidebar/SidebarNav.tsx

@@ -33,7 +33,7 @@ export const SidebarNav = () => {
         </Link>
         <Link
           href={`/${router.locale}`}
-          className="h4-mktg color-text-primary no-underline no-wrap pl-2 flex-auto"
+          className="f4 font-weight-semibold color-text-primary no-underline no-wrap pl-2 flex-auto"
         >
           {t('github_docs')}
         </Link>

components/sublanding/ArticleCard.tsx

@@ -24,7 +24,7 @@ export const ArticleCard = ({ card, typeLabel }: Props) => {
                 <span
                   data-testid="article-card-topic"
                   key={topic}
-                  className="IssueLabel bg-gradient--pink-blue color-text-inverse mr-1"
+                  className="IssueLabel color-bg-info-inverse color-text-inverse mr-1"
                 >
                   {topic}
                 </span>

components/sublanding/LearningTrack.tsx

@@ -19,17 +19,17 @@ export const LearningTrack = ({ track }: Props) => {
   return (
     <div data-testid="learning-track" className="my-3 px-4 col-12 col-md-6">
       <div className="Box d-flex flex-column">
-        <div className="Box-header bg-gradient--blue-pink p-4 d-flex flex-1 flex-items-start flex-wrap">
+        <div className="Box-header color-bg-secondary p-4 d-flex flex-1 flex-items-start flex-wrap">
           <div className="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
             <div className="my-xl-0 mr-xl-3">
-              <h5 className="mb-3 color-text-inverse font-mktg h3-mktg ">{track?.title}</h5>
+              <h5 className="mb-3 color-text f3 font-weight-semibold">{track?.title}</h5>
-              <TruncateLines as="p" maxLines={3} className="color-text-inverse">
+              <TruncateLines as="p" maxLines={3} className="color-text">
                 {track?.description}
               </TruncateLines>
             </div>
           </div>
           <a
-            className="d-inline-flex border color-border-inverse color-text-inverse px-3 py-2 f5 no-underline text-bold no-wrap mt-3 mt-md-0 flex-items-center flex-justify-center"
+            className="d-inline-flex btn no-wrap mt-3 mt-md-0 flex-items-center flex-justify-center"
             role="button"
             href={`${track?.guides && track?.guides[0].href}?learn=${track?.trackName}`}
           >

components/sublanding/SubLandingHero.tsx

@@ -18,7 +18,7 @@ export const SubLandingHero = () => {
       >
         <div className="d-flex flex-justify-between flex-items-center">
           <div
-            className="color-bg-primary color-text-link border-gradient--pink-blue-dark d-inline-flex flex-items-center flex-justify-center circle"
+            className="color-bg-primary color-text-link border d-inline-flex flex-items-center flex-justify-center circle"
             style={{ width: 40, height: 40 }}
           >
             {featuredTrack.guides && (
@@ -31,8 +31,8 @@ export const SubLandingHero = () => {
             {t('guide_types')[guide.page?.type || '']}
           </div>
         </div>
-        <h3 className="font-mktg h3-mktg my-4 color-text-primary">{guide.title}</h3>
+        <h3 className="font-weight-semibold my-4 color-text-primary">{guide.title}</h3>
-        <TruncateLines maxLines={8} className="lead-mktg color-text-secondary f5 my-4">
+        <TruncateLines maxLines={8} className="color-text-secondary f5 my-4">
           <span dangerouslySetInnerHTML={{ __html: guide.intro }} />
         </TruncateLines>
       </Link>
@@ -43,12 +43,9 @@ export const SubLandingHero = () => {
     <div>
       <header className="d-flex gutter mb-6">
         <div className="col-12">
-          <Breadcrumbs variant="large" />
+          <Breadcrumbs />
-          <h1 className="my-3 font-mktg">{title} guides</h1>
+          <h1 className="my-3">{title} guides</h1>
-          <div
+          <div className="color-text-secondary f2" dangerouslySetInnerHTML={{ __html: intro }} />
-            className="lead-mktg color-text-secondary f4"
-            dangerouslySetInnerHTML={{ __html: intro }}
-          />
         </div>
       </header>
       {featuredTrack && (
@@ -58,20 +55,18 @@ export const SubLandingHero = () => {
             className="list-style-none d-flex flex-nowrap overflow-x-scroll px-2"
           >
             <li className="px-2 d-flex flex-shrink-0" style={{ width: cardWidth }}>
-              <div className="d-inline-block Box p-5 bg-gradient--blue-pink color-text-inverse">
+              <div className="d-inline-block Box p-5 color-bg-secondary">
                 <div
-                  className="color-text-inverse d-inline-flex flex-items-center flex-justify-center circle"
+                  className="d-inline-flex flex-items-center flex-justify-center circle border"
                   style={{ width: 40, height: 40, border: '2px white solid' }}
                 >
                   <StarFillIcon size={24} />
                 </div>
-                <h3 className="font-mktg h3-mktg my-4">{featuredTrack.title}</h3>
+                <h3 className="font-weight-semibold my-4">{featuredTrack.title}</h3>
-                <div className="lead-mktg color-text-inverse f5 my-4">
+                <div className="f5 my-4">{featuredTrack.description}</div>
-                  {featuredTrack.description}
-                </div>
                 {featuredTrack.guides && (
                   <Link
-                    className="d-inline-flex flex-items-center flex-justify-center border color-border-inverse color-text-inverse px-4 py-2 f5 no-underline text-bold"
+                    className="d-inline-flex flex-items-center flex-justify-center btn px-4 py-2 f5 no-underline text-bold"
                     role="button"
                     href={`${featuredTrack.guides[0].href}?learn=${featuredTrack.trackName}`}
                   >

components/ui/MarkdownContent/stylesheets/headers.scss

@@ -23,9 +23,4 @@
   h5 {
     font-size: 0.85em;
   }
-
-  // needs specificity to override
-  [class~="lead-mktg"] p {
-    color: var(--color-auto-gray-9);
-  }
 }

components/ui/MarkdownContent/stylesheets/lists.scss

@@ -74,3 +74,8 @@
     margin-bottom: 15px;
   }
 }
+
+/* Override primer style */
+.markdownBody div > ol:not([type]) {
+  list-style-type: none;
+}

data/reusables/enterprise/ghec-cta-button.md

@@ -1 +1 @@
-<a href="https://github.com/account/organizations/new?plan=business_plus" class="btn-mktg bt-large f4 mt-3 mr-3">Try risk-free for 14 days</a>
+<a href="https://github.com/account/organizations/new?plan=business_plus" class="btn btn-primary-matte btn-large f4 mt-3 mr-3">Try risk-free for 14 days</a>

lib/liquid-tags/octicon.js

@@ -24,6 +24,10 @@ export default {
     // Breaking change in octicons 12
     // https://github.com/primer/octicons/releases/tag/v12.0.0
     if (this.icon === 'trashcan') this.icon = 'trash'
+    // https://github.com/primer/octicons/blob/main/CHANGELOG.md#1500
+    if (this.icon === 'duplicate') this.icon = 'copy'
+    if (this.icon === 'clippy') this.icon = 'paste'
+
     this.options = {}
 
     // Memoize any options passed

lib/render-content/plugins/code-header.js

@@ -93,7 +93,7 @@ export default function addCodeHeader(node) {
   // Display the language using the above map of `{ [shortCode]: language }`
   const language = LANGUAGE_MAP[node.lang] || node.lang || 'Code'
 
-  const btnIconHtml = octicons.clippy.toSVG()
+  const btnIconHtml = octicons.paste.toSVG()
   const btnIconAst = parse5.parse(String(btnIconHtml), { sourceCodeLocationInfo: true })
   const btnIcon = fromParse5(btnIconAst, { file: btnIconHtml })
 

middleware/trigger-error.js

@@ -7,7 +7,7 @@ export default async function triggerError(req, res, next) {
   // pattern used on async middleware! This is an intentional omission!
 
   // prevent this from being used in production
-  if (process.env.NODE_ENV === 'production') return next()
+  if (process.env.NODE_ENV === 'production' && process.env.HEROKU_PRODUCTION_APP) return next()
 
   throw new Error('Intentional error')
 }

package.json

@@ -12,9 +12,9 @@
     "@alex_neo/jest-expect-message": "^1.0.5",
     "@hapi/accept": "^5.0.2",
     "@primer/components": "^28.4.0",
-    "@primer/css": "^16.2.0",
+    "@primer/css": "^17.5.2",
-    "@primer/octicons": "^14.1.0",
+    "@primer/octicons": "^15.0.1",
-    "@primer/octicons-react": "^14.1.0",
+    "@primer/octicons-react": "^15.0.1",
     "accept-language-parser": "^1.5.0",
     "ajv": "^8.4.0",
     "ajv-formats": "^2.1.0",

pages/404.tsx

@@ -17,8 +17,8 @@ const Custom404 = () => {
       <div className="container-xl p-responsive py-6 width-full flex-1">
         <article className="col-md-10 col-lg-7 mx-auto">
           <h1 className="mb-3 pb-3 border-bottom">Ooops!</h1>
-          <p className="lead-mktg">It looks like this page doesn't exist.</p>
+          <p className="f2 color-text-secondary">It looks like this page doesn't exist.</p>
-          <p className="lead-mktg">
+          <p className="f3">
             We track these errors automatically, but if the problem persists please feel free to
             contact us.
           </p>

pages/index.tsx

@@ -61,7 +61,7 @@ function LandingPage(props: LandingPageProps) {
                     <OctocatHeader />
                   </div>
                   <div className="col-lg-5 mt-6">
-                    <h1 className="h1-mktg mb-3">{t('search:need_help')}</h1>
+                    <h1 className="font-weight-semibold mb-3">{t('search:need_help')}</h1>
                     {SearchInput}
                   </div>
                 </div>
@@ -76,7 +76,7 @@ function LandingPage(props: LandingPageProps) {
       {/* <!-- Explore by product --> */}
       <section className="container-xl pb-lg-4 my-8 px-3 px-md-6">
         <div className="">
-          <h2 className="text-mono f5 text-normal color-text-secondary text-md-center mb-4">
+          <h2 className="f5 text-normal color-text-secondary text-md-center mb-4">
             {t('explore_by_product')}
           </h2>
           <div className="d-flex flex-wrap gutter gutter-xl-spacious">
@@ -93,7 +93,7 @@ function LandingPage(props: LandingPageProps) {
               return (
                 <div className="d-flex flex-column col-12 col-sm-6 col-lg-3 pb-4" key={product.id}>
                   <a
-                    className="btn-mktg flex-auto d-flex flex-items-center btn-outline-mktg btn-large-mktg ws-normal "
+                    className="f4 flex-auto d-flex flex-items-center ws-normal btn btn-outline py-3"
                     href={href}
                     target={product.external ? '_blank' : undefined}
                   >

pages/storybook.tsx

@@ -37,7 +37,9 @@ export default function Storybook() {
   return (
     <div className="p-4 mx-auto" style={{ maxWidth: 1200 }}>
       <h1>GitHub Docs Storybook</h1>
-      <p className="f3">This page lists React components unique to the GitHub docs.</p>
+      <p className="f2 color-text-secondary">
+        This page lists React components unique to the GitHub docs.
+      </p>
       <div className="my-4 d-lg-flex flex-items-start">
         <nav className="menu col-12 col-lg-3 mr-4 color-bg-secondary position-lg-sticky top-0">
           {stories.map(({ name }) => (

stylesheets/font-mktg.scss

@@ -1,51 +0,0 @@
-// stylelint-disable primer/no-unused-vars
-// Typography
-
-@import "@primer/css/support/index.scss";
-
-$marketing-font-path: "/assets/fonts/alliance/";
-$font-family-mktg: "Alliance No.1", -apple-system, BlinkMacSystemFont,
-  "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
-  "Segoe UI Emoji", "Segoe UI Symbol" !default;
-$font-weight-extrabold: 800 !default;
-
-.font-mktg {
-  font-family: $font-family-mktg;
-}
-
-// Type
-@font-face {
-  font-family: "Alliance No.1";
-  font-style: normal;
-  font-weight: $font-weight-normal;
-  src: local("Alliance No.1 Regular"), local("alliance-no-1-regular"),
-    url("#{$marketing-font-path}alliance-no-1-regular.woff") format("woff");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Alliance No.1";
-  font-style: normal;
-  font-weight: $font-weight-semibold;
-  src: local("Alliance No.1 Medium"), local("alliance-no-1-medium"),
-    url("#{$marketing-font-path}alliance-no-1-medium.woff") format("woff");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Alliance No.1";
-  font-style: normal;
-  font-weight: $font-weight-bold;
-  src: local("Alliance No.1 Bold"), local("alliance-no-1-bold"),
-    url("#{$marketing-font-path}alliance-no-1-bold.woff") format("woff");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Alliance No.1";
-  font-style: normal;
-  font-weight: $font-weight-extrabold;
-  src: local("Alliance No.1 ExtraBold"), local("alliance-no-1-extrabold"),
-    url("#{$marketing-font-path}alliance-no-1-extrabold.woff") format("woff");
-  font-display: swap;
-}

stylesheets/gradient.scss

@@ -1,104 +0,0 @@
-$gradients: (
-  "-purple-pink":
-    linear-gradient(
-      135deg,
-      var(--color-auto-purple-5) 0%,
-      var(--color-auto-pink-5) 100%
-    ),
-  /*"-aquamarine-mauve":  linear-gradient(130deg, #3bf0e4 -6.8%, #bca1f7 70%),
-  "-purple-coral":  linear-gradient(87.54deg, #9867f0 -6.8%, #ed4e50 84.14%),
-  "-purple-coral-dark": linear-gradient(92deg, #bca1f7 15%, #e577b4 45%, #ff7170 85%),
-  "-coral-yellow":  linear-gradient(267.91deg, #ffe57f 9.35%, #ff7170 96.48%),
-  "-coral-yellow-dark": linear-gradient(-70deg, #ff7170 0%, #ffe57f 100%),
-  "-dark-mint":  linear-gradient(90deg, #05aa82, #1c8df0),
-  "-mint-blue":  linear-gradient(271.72deg, #a2facf 7.09%, #64acff 96.61%),
-  "-mint-blue-dark": linear-gradient(-70deg, #a2facf 0%, #64acff 100%),
-  "-turq-purple-dark": linear-gradient(-70deg, #3bf0e4 0%, #bca1f7 100%),
-  "-blue-green": linear-gradient(-70deg, #2188ff 0%, #01a49e 100%),
-  "-red-orange": linear-gradient(-70deg, #ed4e50 0%, #f06f00 100%),
-  "-blue-purple": linear-gradient(-70deg, #2188ff 0%, #804eda 100%), */
-    "-pink-blue":
-    linear-gradient(
-      90deg,
-      var(--color-auto-pink-5) -50%,
-      var(--color-auto-blue-5) 150%
-    ),
-  "-pink-blue-dark":
-    linear-gradient(
-      -70deg,
-      var(--color-auto-pink-3) 0%,
-      var(--color-auto-blue-3) 100%
-    ),
-  "-blue-pink":
-    linear-gradient(
-      -70deg,
-      var(--color-auto-blue-5) 0%,
-      var(--color-auto-pink-5) 100%
-    ),
-) !default;
-
-@mixin bg-gradient($parent, $gradient) {
-  #{$parent} {
-    background: $gradient;
-  }
-}
-
-/*
-@mixin text-gradient($parent, $gradient) {
-  #{parent} {
-    background-image: $gradient;
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    color: transparent;
-  }
-}
-*/
-
-$border-width: 2px;
-@mixin border-gradient($parent, $gradient) {
-  #{$parent} {
-    position: relative;
-    background-clip: padding-box;
-    &:before {
-      content: "";
-      position: absolute;
-      background: var(--color-bg-primary);
-      border-radius: inherit;
-      z-index: 1;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-    }
-    &:after {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background: $gradient;
-      content: "";
-      z-index: 0;
-      border-radius: inherit;
-      margin: -$border-width;
-    }
-    & > span {
-      z-index: 2;
-    }
-  }
-}
-
-@each $gradient, $value in $gradients {
-  @include bg-gradient(".bg-gradient-#{$gradient}", $value);
-}
-
-/*
-@each $gradient, $value in $gradients {
-  @include text-gradient(".text-gradient-#{gradient}", $value);
-}
-*/
-
-@each $gradient, $value in $gradients {
-  @include border-gradient(".border-gradient-#{$gradient}", $value);
-}

stylesheets/index.scss

@@ -5,13 +5,7 @@
 @import "@primer/css/labels/index.scss";
 @import "@primer/css/avatars/avatar.scss";
 
-$marketing-font-path: "/assets/fonts/inter/";
-@import "@primer/css/marketing/index.scss";
-@import "font-mktg.scss";
-
 @import "extended-markdown.scss";
-@import "font-mktg.scss";
-@import "gradient.scss";
 @import "headings.scss";
 @import "images.scss";
 @import "shadows.scss";

stylesheets/utilities.scss

@@ -89,15 +89,35 @@
 ------------------------------------------------------------------------------*/
 
 .fade-tertiary-left {
-  background: linear-gradient(to right, var(--color-bg-tertiary), transparent);
+  background: linear-gradient(to right, var(--color-bg-primary), transparent);
 }
 
 .fade-tertiary-right {
-  background: linear-gradient(to left, var(--color-bg-tertiary), transparent);
+  background: linear-gradient(to left, var(--color-bg-primary), transparent);
 }
 
 .fade-tertiary-bottom {
-  background: linear-gradient(to top, var(--color-bg-tertiary), transparent);
+  background: linear-gradient(to top, var(--color-bg-primary), transparent);
+}
+
+/* Blue primary button
+------------------------------------------------------------------------------*/
+.btn-primary-matte {
+  color: var(--color-text-inverse);
+  background-color: var(--color-auto-blue-5);
+  border-color: var(--color-btn-primary-border);
+  box-shadow: var(--color-btn-primary-shadow),
+    var(--color-btn-primary-inset-shadow);
+}
+
+.btn-primary-matte:hover {
+  background-color: var(--color-auto-blue-6);
+}
+
+/* Semibold text
+------------------------------------------------------------------------------*/
+.font-weight-semibold {
+  font-weight: $font-weight-semibold;
 }
 
 .outline-none {

tests/rendering/head.js

@@ -31,7 +31,7 @@ describe('<head>', () => {
     ).toBe(true)
     // HTML intro
     expect(
-      $('div.lead-mktg')
+      $('[data-testid="lead"]')
         .html()
         .startsWith('<p>You can <a href="/articles/merging-a-pull-request">merge pull requests</a>')
     )

tests/rendering/server.js

@@ -242,7 +242,7 @@ describe('server', () => {
     let $ = await getDOM(
       '/en/github/importing-your-projects-to-github/importing-a-git-repository-using-the-command-line'
     )
-    const articleIntro = $('.lead-mktg').text()
+    const articleIntro = $('[data-testid="lead"]').text()
     $ = await getDOM(
       '/en/enterprise/2.16/user/importing-your-projects-to-github/importing-source-code-to-github'
     )
@@ -291,9 +291,9 @@ describe('server', () => {
 
   test('renders liquid within liquid within liquid in intros', async () => {
     const $ = await getDOM('/en/github/administering-a-repository/about-merge-methods-on-github')
-    expect($('div.lead-mktg').first().text().includes('merge their pull requests on GitHub')).toBe(
+    expect(
-      true
+      $('[data-testid="lead"]').first().text().includes('merge their pull requests on GitHub')
-    )
+    ).toBe(true)
   })
 
   test('renders product frontmatter callouts', async () => {