Primer 18 b (github#22462)

* Create migrate-colors-primer-18.js * Update colors round 1 * upgrade primer packages * Update index.scss * Replace auto colors * remove btn-primary-matte * Turns out the class names and variables names DONT LINE UP... ugh.... * Check for allowed var colors
JacobKlipper · Oct 28, 2021 · 567652b · 567652b
1 parent 0b99eb9
commit 567652b
Show file tree

Hide file tree

Showing 77 changed files with 805 additions and 319 deletions.
diff --git a/components/Breadcrumbs.tsx b/components/Breadcrumbs.tsx
@@ -41,14 +41,14 @@ export const Breadcrumbs = () => {
               title={title}
               className={cx(
                 'd-inline-block px-2',
-                pathWithLocale === breadcrumb.href && 'color-text-tertiary'
+                pathWithLocale === breadcrumb.href && 'color-fg-muted'
               )}
             >
               {breadcrumb.title}
             </Link>
           ),
           i !== arr.length - 1 ? (
-            <span className="color-text-tertiary" key={`${i}-slash`}>
+            <span className="color-fg-muted" key={`${i}-slash`}>
               /
             </span>
           ) : null,

diff --git a/components/GenericError.tsx b/components/GenericError.tsx
@@ -49,7 +49,7 @@ export function GenericError() {
 export const SimpleHeader = () => {
   const router = useRouter()
   return (
-    <div className="border-bottom color-border-secondary no-print">
+    <div className="border-bottom color-border-muted no-print">
       <header className="container-xl p-responsive py-3 position-relative d-flex width-full">
         <div
           className="d-flex flex-items-center"
@@ -60,13 +60,13 @@ export const SimpleHeader = () => {
           <Link href={`/${router.locale}`}>
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
             <a aria-hidden="true" tabIndex={-1}>
-              <MarkGithubIcon size={32} className="color-icon-primary" />
+              <MarkGithubIcon size={32} className="color-fg-default" />
             </a>
           </Link>
 
           <Link href={`/${router.locale}`}>
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <a className="h4 color-text-primary no-underline no-wrap pl-2">GitHub Docs</a>
+            <a className="h4 color-fg-default no-underline no-wrap pl-2">GitHub Docs</a>
           </Link>
         </div>
       </header>
@@ -79,7 +79,7 @@ export const SimpleFooter = () => {
     <footer className="py-6 text-small">
       <div className="container-xl d-flex px-3 px-md-6 flex-justify-center">
         <ul className="d-flex list-style-none flex-wrap flex-justify-center">
-          <li className="d-flex mr-xl-3 color-text-secondary">
+          <li className="d-flex mr-xl-3 color-fg-muted">
             <MarkGithubIcon className="mr-2 mr-xl-3" size={20} />
             <span>&copy; {new Date().getFullYear()} GitHub, Inc.</span>
           </li>

diff --git a/components/Search.module.scss b/components/Search.module.scss
@@ -4,7 +4,7 @@
 }
 
 .searchResultTitle mark {
-  color: var(--color-text-link);
+  color: var(--color-accent-fg);
 }
 
 .searchResultIntro mark {
@@ -28,7 +28,7 @@
   right: 0;
   width: 0;
   border-radius: 3px;
-  background: var(--color-bg-primary);
+  background: var(--color-canvas-default);
   box-shadow: 0 1px 15px rgba(0, 0, 0, 0.15);
   transition: width 0.3s ease-in-out;
   padding-top: 64px;
@@ -57,7 +57,7 @@
 }
 
 .searchOverlayOpen {
-  background: var(--color-bg-backdrop);
+  background: var(--color-primer-canvas-backdrop);
   position: fixed;
   top: 0;
   right: 0;

diff --git a/components/Search.tsx b/components/Search.tsx
@@ -219,7 +219,7 @@ export function Search({
             )}
             style={{
               background:
-                'var(--color-bg-primary) url("/assets/images/octicons/search.svg") no-repeat 6px',
+                'var(--color-canvas-default) url("/assets/images/octicons/search.svg") no-repeat 6px',
             }}
             type="search"
             placeholder={t`placeholder`}
@@ -297,14 +297,14 @@ function ShowSearchResults({
               key={url}
               data-testid="search-result"
               className={cx(
-                'list-style-none overflow-hidden rounded-3 color-text-primary border',
-                isActive ? 'color-bg-tertiary' : 'color-border-transparent'
+                'list-style-none overflow-hidden rounded-3 color-fg-default border',
+                isActive ? 'color-bg-subtle' : 'color-border-transparent'
               )}
               onMouseEnter={() => setActiveHit(index)}
             >
-              <div className={cx('py-3 px-3', isActive && 'color-border-secondary')}>
+              <div className={cx('py-3 px-3', isActive && 'color-border-muted')}>
                 <a
-                  className="no-underline color-text-primary"
+                  className="no-underline color-fg-default"
                   href={url}
                   onClick={(event) => {
                     event.preventDefault()

diff --git a/components/VersionPicker.tsx b/components/VersionPicker.tsx
@@ -42,7 +42,7 @@ export const VersionPicker = ({ variant = 'default', popoverVariant, hideLabel }
         >
           {(variant === 'compact' || variant === 'inline') && (
             <summary
-              className="d-block btn btn-invisible color-text-primary"
+              className="d-block btn btn-invisible color-fg-default"
               aria-haspopup="true"
               aria-label="Toggle version list"
             >
@@ -82,7 +82,7 @@ export const VersionPicker = ({ variant = 'default', popoverVariant, hideLabel }
                     setOpen(false)
                   }}
                   href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}
-                  className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap"
+                  className="f6 no-underline color-fg-muted pl-3 pr-2 no-wrap"
                 >
                   {t('all_enterprise_releases')}{' '}
                   <ArrowRightIcon verticalAlign="middle" size={15} className="mr-2" />
@@ -111,7 +111,7 @@ export const VersionPicker = ({ variant = 'default', popoverVariant, hideLabel }
                     setOpen(false)
                   }}
                   href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}
-                  className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap"
+                  className="f6 no-underline color-fg-muted pl-3 pr-2 no-wrap"
                 >
                   {t('all_enterprise_releases')}{' '}
                   <ArrowRightIcon verticalAlign="middle" size={15} className="mr-2" />

diff --git a/components/article/LearningTrackNav.tsx b/components/article/LearningTrackNav.tsx
@@ -10,15 +10,15 @@ export function LearningTrackNav({ track }: Props) {
   return (
     <div
       data-testid="learning-track-nav"
-      className="py-3 px-4 rounded color-bg-primary border d-flex flex-justify-between"
+      className="py-3 px-4 rounded color-bg-default border d-flex flex-justify-between"
     >
       <span className="d-flex flex-column">
         {prevGuide && (
           <>
-            <span className="f6 color-text-secondary">{t('prevGuide')}</span>
+            <span className="f6 color-fg-muted">{t('prevGuide')}</span>
             <a
               href={`${prevGuide.href}?learn=${trackName}&learnProduct=${trackProduct}`}
-              className="text-bold color-text-secondary"
+              className="text-bold color-fg-muted"
             >
               {prevGuide.title}
             </a>
@@ -29,10 +29,10 @@ export function LearningTrackNav({ track }: Props) {
       <span className="d-flex flex-column flex-items-end">
         {nextGuide && (
           <>
-            <span className="f6 color-text-secondary">{t('nextGuide')}</span>
+            <span className="f6 color-fg-muted">{t('nextGuide')}</span>
             <a
               href={`${nextGuide.href}?learn=${trackName}&learnProduct=${trackProduct}`}
-              className="text-bold color-text-secondary text-right f4"
+              className="text-bold color-fg-muted text-right f4"
             >
               {nextGuide.title}
             </a>

diff --git a/components/landing/ArticleList.tsx b/components/landing/ArticleList.tsx
@@ -46,7 +46,7 @@ export const ArticleList = ({ title, viewAllHref, articles }: ArticleListPropsT)
                 }
               >
                 {!link.hideIntro && link.intro && (
-                  <TruncateLines as="p" maxLines={2} className="color-text-secondary mb-0 mt-1">
+                  <TruncateLines as="p" maxLines={2} className="color-fg-muted mb-0 mt-1">
                     <span
                       data-testid="link-with-intro-intro"
                       dangerouslySetInnerHTML={{ __html: link.intro }}
@@ -55,7 +55,7 @@ export const ArticleList = ({ title, viewAllHref, articles }: ArticleListPropsT)
                 )}
                 {link.date && (
                   <time
-                    className="tooltipped tooltipped-n color-text-tertiary text-mono mt-1"
+                    className="tooltipped tooltipped-n color-fg-muted text-mono mt-1"
                     aria-label={dayjs(link.date).format('LLL')}
                   >
                     {dayjs(link.date).format('MMMM DD')}

diff --git a/components/landing/CodeExampleCard.tsx b/components/landing/CodeExampleCard.tsx
@@ -8,35 +8,35 @@ type Props = {
 export const CodeExampleCard = ({ example }: Props) => {
   return (
     <a
-      className="Box d-flex flex-column flex-justify-between height-full color-shadow-medium hover-shadow-large no-underline color-text-primary"
+      className="Box d-flex flex-column flex-justify-between height-full color-shadow-medium hover-shadow-large no-underline color-fg-default"
       data-testid="code-example-card"
       href={`https://github.com/${example.href}`}
     >
       <div className="p-4">
         <h4 dangerouslySetInnerHTML={{ __html: example.title }} />
         <p
-          className="mt-2 mb-4 color-text-tertiary"
+          className="mt-2 mb-4 color-fg-muted"
           dangerouslySetInnerHTML={{ __html: example.description }}
         />
         <div className="d-flex flex-wrap">
           {example.tags.map((tag) => {
             return (
               <span
                 key={tag}
-                className="IssueLabel color-text-inverse color-bg-info-inverse mr-2 mb-1"
+                className="IssueLabel color-fg-on-emphasis color-bg-accent-emphasis mr-2 mb-1"
               >
                 {tag}
               </span>
             )
           })}
         </div>
       </div>
-      <footer className="border-top p-4 color-text-secondary d-flex flex-items-center">
+      <footer className="border-top p-4 color-fg-muted d-flex flex-items-center">
         <RepoIcon className="flex-shrink-0" />
         <TruncateLines
           as="span"
           maxLines={1}
-          className="ml-2 text-mono text-small color-text-link line-break-anywhere"
+          className="ml-2 text-mono text-small color-fg-accent line-break-anywhere"
         >
           {example.href}
         </TruncateLines>

diff --git a/components/landing/CodeExamples.tsx b/components/landing/CodeExamples.tsx
@@ -63,10 +63,7 @@ export const CodeExamples = () => {
       )}
 
       {isSearching && searchResults.length === 0 && (
-        <div
-          data-testid="code-examples-no-results"
-          className="py-4 text-center color-text-secondary"
-        >
+        <div data-testid="code-examples-no-results" className="py-4 text-center color-fg-muted">
           <div className="mb-3">
             <SearchIcon size={24} />{' '}
           </div>

diff --git a/components/landing/GuideCard.tsx b/components/landing/GuideCard.tsx
@@ -10,12 +10,12 @@ export const GuideCard = ({ guide }: Props) => {
   return (
     <div className="col-lg-4 col-12 mb-4">
       <a
-        className="Box color-shadow-medium height-full d-block hover-shadow-large no-underline color-text-primary p-5"
+        className="Box color-shadow-medium height-full d-block hover-shadow-large no-underline color-fg-default p-5"
         href={guide.href}
       >
         <h2 dangerouslySetInnerHTML={{ __html: guide.title }} />
         <p
-          className="mt-2 mb-4 color-text-tertiary"
+          className="mt-2 mb-4 color-fg-muted"
           dangerouslySetInnerHTML={{ __html: guide.intro || '' }}
         />
 

diff --git a/components/landing/LandingHero.tsx b/components/landing/LandingHero.tsx
@@ -43,7 +43,7 @@ export const LandingHero = () => {
                 <FullLink
                   key={link}
                   href={link}
-                  className={cx('btn btn-large f4 mt-3 mr-3 ', i === 0 && 'btn-primary-matte')}
+                  className={cx('btn btn-large f4 mt-3 mr-3 ', i === 0 && 'btn-primary')}
                 >
                   {t(key)}
                 </FullLink>

diff --git a/components/landing/LandingSection.tsx b/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('h1 color-text-primary', !description ? 'mb-3' : 'mb-4')}>
+        <h2 className={cx('h1 color-fg-default', !description ? 'mb-3' : 'mb-4')}>
           {sectionLink ? (
             <a className="color-unset" href={`#${sectionLink}`}>
               {title}
@@ -22,10 +22,7 @@ export const LandingSection = ({ title, children, className, sectionLink, descri
         </h2>
       )}
       {description && (
-        <div
-          className="color-text-secondary f4"
-          dangerouslySetInnerHTML={{ __html: description }}
-        />
+        <div className="color-fg-muted f4" dangerouslySetInnerHTML={{ __html: description }} />
       )}
       {children}
     </div>

diff --git a/components/landing/ProductArticlesList.tsx b/components/landing/ProductArticlesList.tsx
@@ -52,7 +52,7 @@ const ProductTreeNodeList = ({ treeNode }: { treeNode: ProductTreeNode }) => {
             >
               <Link href={childNode.href}>{childNode.page.title}</Link>
               {childNode.page.documentType === 'mapTopic' ? (
-                <small className="color-text-secondary d-inline-block">
+                <small className="color-fg-muted d-inline-block">
                   &nbsp;&bull; {childNode.childPages.length} articles
                 </small>
               ) : null}

diff --git a/components/landing/ProductLanding.tsx b/components/landing/ProductLanding.tsx
@@ -65,7 +65,7 @@ export const ProductLanding = () => {
       )}
 
       {featuredLinks.guideCards?.length > 0 && (
-        <div className="color-bg-tertiary py-6">
+        <div className="color-bg-subtle py-6">
           <LandingSection title={t('guides')} sectionLink="guides-2" className="my-6">
             <GuideCards />
           </LandingSection>

diff --git a/components/landing/ProductReleases.tsx b/components/landing/ProductReleases.tsx
@@ -25,9 +25,9 @@ export function ProductReleases() {
           const secondPreviousVersion = `enterprise-server@${release.secondPreviousRelease}`
           return (
             <div key={releaseNumber} className="col-lg-4 col-12 mb-4">
-              <div className="Box color-shadow-medium height-full d-block hover-shadow-large no-underline color-text-primary p-5">
+              <div className="Box color-shadow-medium height-full d-block hover-shadow-large no-underline color-fg-default p-5">
                 <h2>{allVersions[releaseVersion].versionTitle}</h2>
-                <p className="mt-2 mb-4 color-text-tertiary">
+                <p className="mt-2 mb-4 color-fg-muted">
                   <ListUnorderedIcon />{' '}
                   <Link
                     href={`/${router.locale}/${releaseVersion}/admin/release-notes#${latestPatch.version}`}
@@ -36,7 +36,7 @@ export function ProductReleases() {
                   </Link>{' '}
                   ({latestPatch.date})
                 </p>
-                <p className="mt-2 mb-4 color-text-tertiary">
+                <p className="mt-2 mb-4 color-fg-muted">
                   <ArrowUpIcon /> {t('upgrade_from')}{' '}
                   <Link
                     href={`/${router.locale}/${firstPreviousVersion}/admin/enterprise-management/upgrading-github-enterprise-server`}
@@ -50,7 +50,7 @@ export function ProductReleases() {
                     {release.secondPreviousRelease}
                   </Link>
                 </p>
-                <p className="mt-2 mb-4 color-text-tertiary">
+                <p className="mt-2 mb-4 color-fg-muted">
                   <FileIcon />{' '}
                   <Link href={`/${router.locale}/${releaseVersion}`}>{t('browse_all_docs')}</Link>
                 </p>

diff --git a/components/landing/RepoCard.tsx b/components/landing/RepoCard.tsx
@@ -8,7 +8,7 @@ type Props = {
 export const RepoCard = ({ repo, href }: Props) => {
   return (
     <a
-      className="Box d-flex height-full color-shadow-medium hover-shadow-large no-underline color-text-primary p-4"
+      className="Box d-flex height-full color-shadow-medium hover-shadow-large no-underline color-fg-default p-4"
       href={href || `https://github.com/${repo.repo}`}
     >
       <div className="flex-shrink-0 mr-3">
@@ -20,7 +20,7 @@ export const RepoCard = ({ repo, href }: Props) => {
       </div>
       <div className="flex-auto">
         <h4>{repo.repo}</h4>
-        <p className="mt-1 color-text-tertiary">{repo.description}</p>
+        <p className="mt-1 color-fg-muted">{repo.description}</p>
       </div>
     </a>
   )

diff --git a/components/landing/TableOfContents.tsx b/components/landing/TableOfContents.tsx
@@ -48,13 +48,10 @@ export const TableOfContents = (props: Props) => {
             )}
           </li>
         ) : (
-          <li key={href} className={cx('mb-3 border-bottom pb-2', isActive && 'color-auto-gray-4')}>
+          <li key={href} className={cx('mb-3 border-bottom pb-2', isActive && 'color-fg-muted')}>
             <BumpLink as={Link} href={href} title={<h2 className="h4">{title}</h2>}>
               {intro && (
-                <p
-                  className="f4 color-text-secondary"
-                  dangerouslySetInnerHTML={{ __html: intro }}
-                />
+                <p className="f4 color-fg-muted" dangerouslySetInnerHTML={{ __html: intro }} />
               )}
             </BumpLink>
           </li>

diff --git a/components/landing/UserCard.tsx b/components/landing/UserCard.tsx
@@ -8,7 +8,7 @@ type Props = {
 export const UserCard = ({ user, href }: Props) => {
   return (
     <a
-      className="Box d-flex height-full color-shadow-medium hover-shadow-large no-underline color-text-primary p-4"
+      className="Box d-flex height-full color-shadow-medium hover-shadow-large no-underline color-fg-default p-4"
       href={href || `https://github.com/${user.username}`}
     >
       <div className="flex-shrink-0 mr-3">
@@ -20,7 +20,7 @@ export const UserCard = ({ user, href }: Props) => {
       </div>
       <div className="flex-auto">
         <h4>{user.username}</h4>
-        <p className="mt-1 color-text-tertiary">{user.description}</p>
+        <p className="mt-1 color-fg-muted">{user.description}</p>
       </div>
     </a>
   )

diff --git a/components/page-footer/Contribution.tsx b/components/page-footer/Contribution.tsx
@@ -13,12 +13,12 @@ export const Contribution = () => {
   return (
     <div className="f5 contribution">
       <h2 className="f4 mb-3">{t`title`}</h2>
-      <p className="max-w-xs color-text-secondary mb-3">{t`body`}</p>
+      <p className="max-w-xs color-fg-muted mb-3">{t`body`}</p>
       <a className="btn" href={contributionHref}>
         <GitPullRequestIcon size="small" className="octicon mr-1" />
         {t`button`}
       </a>
-      <p className="color-text-secondary f6 mt-2">
+      <p className="color-fg-muted f6 mt-2">
         {t`or`}{' '}
         <a
           href="https://github.com/github/docs/blob/main/CONTRIBUTING.md"