Skip to content

Commit 567652b

Browse files
heiskrheiskr
authored
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
1 parent 0b99eb9 commit 567652b

File tree

77 files changed

+805
-319
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+805
-319
lines changed

‎components/Breadcrumbs.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,14 @@ export const Breadcrumbs = () => {
4141
title={title}
4242
className={cx(
4343
'd-inline-block px-2',
44-
pathWithLocale === breadcrumb.href && 'color-text-tertiary'
44+
pathWithLocale === breadcrumb.href && 'color-fg-muted'
4545
)}
4646
>
4747
{breadcrumb.title}
4848
</Link>
4949
),
5050
i !== arr.length - 1 ? (
51-
<span className="color-text-tertiary" key={`${i}-slash`}>
51+
<span className="color-fg-muted" key={`${i}-slash`}>
5252
/
5353
</span>
5454
) : null,

‎components/GenericError.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export function GenericError() {
4949
export const SimpleHeader = () => {
5050
const router = useRouter()
5151
return (
52-
<div className="border-bottom color-border-secondary no-print">
52+
<div className="border-bottom color-border-muted no-print">
5353
<header className="container-xl p-responsive py-3 position-relative d-flex width-full">
5454
<div
5555
className="d-flex flex-items-center"
@@ -60,13 +60,13 @@ export const SimpleHeader = () => {
6060
<Link href={`/${router.locale}`}>
6161
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
6262
<a aria-hidden="true" tabIndex={-1}>
63-
<MarkGithubIcon size={32} className="color-icon-primary" />
63+
<MarkGithubIcon size={32} className="color-fg-default" />
6464
</a>
6565
</Link>
6666

6767
<Link href={`/${router.locale}`}>
6868
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
69-
<a className="h4 color-text-primary no-underline no-wrap pl-2">GitHub Docs</a>
69+
<a className="h4 color-fg-default no-underline no-wrap pl-2">GitHub Docs</a>
7070
</Link>
7171
</div>
7272
</header>
@@ -79,7 +79,7 @@ export const SimpleFooter = () => {
7979
<footer className="py-6 text-small">
8080
<div className="container-xl d-flex px-3 px-md-6 flex-justify-center">
8181
<ul className="d-flex list-style-none flex-wrap flex-justify-center">
82-
<li className="d-flex mr-xl-3 color-text-secondary">
82+
<li className="d-flex mr-xl-3 color-fg-muted">
8383
<MarkGithubIcon className="mr-2 mr-xl-3" size={20} />
8484
<span>&copy; {new Date().getFullYear()} GitHub, Inc.</span>
8585
</li>

‎components/Search.module.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
}
55

66
.searchResultTitle mark {
7-
color: var(--color-text-link);
7+
color: var(--color-accent-fg);
88
}
99

1010
.searchResultIntro mark {
@@ -28,7 +28,7 @@
2828
right: 0;
2929
width: 0;
3030
border-radius: 3px;
31-
background: var(--color-bg-primary);
31+
background: var(--color-canvas-default);
3232
box-shadow: 0 1px 15px rgba(0, 0, 0, 0.15);
3333
transition: width 0.3s ease-in-out;
3434
padding-top: 64px;
@@ -57,7 +57,7 @@
5757
}
5858

5959
.searchOverlayOpen {
60-
background: var(--color-bg-backdrop);
60+
background: var(--color-primer-canvas-backdrop);
6161
position: fixed;
6262
top: 0;
6363
right: 0;

‎components/Search.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ export function Search({
219219
)}
220220
style={{
221221
background:
222-
'var(--color-bg-primary) url("/assets/images/octicons/search.svg") no-repeat 6px',
222+
'var(--color-canvas-default) url("/assets/images/octicons/search.svg") no-repeat 6px',
223223
}}
224224
type="search"
225225
placeholder={t`placeholder`}
@@ -297,14 +297,14 @@ function ShowSearchResults({
297297
key={url}
298298
data-testid="search-result"
299299
className={cx(
300-
'list-style-none overflow-hidden rounded-3 color-text-primary border',
301-
isActive ? 'color-bg-tertiary' : 'color-border-transparent'
300+
'list-style-none overflow-hidden rounded-3 color-fg-default border',
301+
isActive ? 'color-bg-subtle' : 'color-border-transparent'
302302
)}
303303
onMouseEnter={() => setActiveHit(index)}
304304
>
305-
<div className={cx('py-3 px-3', isActive && 'color-border-secondary')}>
305+
<div className={cx('py-3 px-3', isActive && 'color-border-muted')}>
306306
<a
307-
className="no-underline color-text-primary"
307+
className="no-underline color-fg-default"
308308
href={url}
309309
onClick={(event) => {
310310
event.preventDefault()

‎components/VersionPicker.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const VersionPicker = ({ variant = 'default', popoverVariant, hideLabel }
4242
>
4343
{(variant === 'compact' || variant === 'inline') && (
4444
<summary
45-
className="d-block btn btn-invisible color-text-primary"
45+
className="d-block btn btn-invisible color-fg-default"
4646
aria-haspopup="true"
4747
aria-label="Toggle version list"
4848
>
@@ -82,7 +82,7 @@ export const VersionPicker = ({ variant = 'default', popoverVariant, hideLabel }
8282
setOpen(false)
8383
}}
8484
href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}
85-
className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap"
85+
className="f6 no-underline color-fg-muted pl-3 pr-2 no-wrap"
8686
>
8787
{t('all_enterprise_releases')}{' '}
8888
<ArrowRightIcon verticalAlign="middle" size={15} className="mr-2" />
@@ -111,7 +111,7 @@ export const VersionPicker = ({ variant = 'default', popoverVariant, hideLabel }
111111
setOpen(false)
112112
}}
113113
href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}
114-
className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap"
114+
className="f6 no-underline color-fg-muted pl-3 pr-2 no-wrap"
115115
>
116116
{t('all_enterprise_releases')}{' '}
117117
<ArrowRightIcon verticalAlign="middle" size={15} className="mr-2" />

‎components/article/LearningTrackNav.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ export function LearningTrackNav({ track }: Props) {
1010
return (
1111
<div
1212
data-testid="learning-track-nav"
13-
className="py-3 px-4 rounded color-bg-primary border d-flex flex-justify-between"
13+
className="py-3 px-4 rounded color-bg-default border d-flex flex-justify-between"
1414
>
1515
<span className="d-flex flex-column">
1616
{prevGuide && (
1717
<>
18-
<span className="f6 color-text-secondary">{t('prevGuide')}</span>
18+
<span className="f6 color-fg-muted">{t('prevGuide')}</span>
1919
<a
2020
href={`${prevGuide.href}?learn=${trackName}&learnProduct=${trackProduct}`}
21-
className="text-bold color-text-secondary"
21+
className="text-bold color-fg-muted"
2222
>
2323
{prevGuide.title}
2424
</a>
@@ -29,10 +29,10 @@ export function LearningTrackNav({ track }: Props) {
2929
<span className="d-flex flex-column flex-items-end">
3030
{nextGuide && (
3131
<>
32-
<span className="f6 color-text-secondary">{t('nextGuide')}</span>
32+
<span className="f6 color-fg-muted">{t('nextGuide')}</span>
3333
<a
3434
href={`${nextGuide.href}?learn=${trackName}&learnProduct=${trackProduct}`}
35-
className="text-bold color-text-secondary text-right f4"
35+
className="text-bold color-fg-muted text-right f4"
3636
>
3737
{nextGuide.title}
3838
</a>

‎components/landing/ArticleList.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const ArticleList = ({ title, viewAllHref, articles }: ArticleListPropsT)
4646
}
4747
>
4848
{!link.hideIntro && link.intro && (
49-
<TruncateLines as="p" maxLines={2} className="color-text-secondary mb-0 mt-1">
49+
<TruncateLines as="p" maxLines={2} className="color-fg-muted mb-0 mt-1">
5050
<span
5151
data-testid="link-with-intro-intro"
5252
dangerouslySetInnerHTML={{ __html: link.intro }}
@@ -55,7 +55,7 @@ export const ArticleList = ({ title, viewAllHref, articles }: ArticleListPropsT)
5555
)}
5656
{link.date && (
5757
<time
58-
className="tooltipped tooltipped-n color-text-tertiary text-mono mt-1"
58+
className="tooltipped tooltipped-n color-fg-muted text-mono mt-1"
5959
aria-label={dayjs(link.date).format('LLL')}
6060
>
6161
{dayjs(link.date).format('MMMM DD')}

‎components/landing/CodeExampleCard.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,35 @@ type Props = {
88
export const CodeExampleCard = ({ example }: Props) => {
99
return (
1010
<a
11-
className="Box d-flex flex-column flex-justify-between height-full color-shadow-medium hover-shadow-large no-underline color-text-primary"
11+
className="Box d-flex flex-column flex-justify-between height-full color-shadow-medium hover-shadow-large no-underline color-fg-default"
1212
data-testid="code-example-card"
1313
href={`https://github.com/${example.href}`}
1414
>
1515
<div className="p-4">
1616
<h4 dangerouslySetInnerHTML={{ __html: example.title }} />
1717
<p
18-
className="mt-2 mb-4 color-text-tertiary"
18+
className="mt-2 mb-4 color-fg-muted"
1919
dangerouslySetInnerHTML={{ __html: example.description }}
2020
/>
2121
<div className="d-flex flex-wrap">
2222
{example.tags.map((tag) => {
2323
return (
2424
<span
2525
key={tag}
26-
className="IssueLabel color-text-inverse color-bg-info-inverse mr-2 mb-1"
26+
className="IssueLabel color-fg-on-emphasis color-bg-accent-emphasis mr-2 mb-1"
2727
>
2828
{tag}
2929
</span>
3030
)
3131
})}
3232
</div>
3333
</div>
34-
<footer className="border-top p-4 color-text-secondary d-flex flex-items-center">
34+
<footer className="border-top p-4 color-fg-muted d-flex flex-items-center">
3535
<RepoIcon className="flex-shrink-0" />
3636
<TruncateLines
3737
as="span"
3838
maxLines={1}
39-
className="ml-2 text-mono text-small color-text-link line-break-anywhere"
39+
className="ml-2 text-mono text-small color-fg-accent line-break-anywhere"
4040
>
4141
{example.href}
4242
</TruncateLines>

‎components/landing/CodeExamples.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,7 @@ export const CodeExamples = () => {
6363
)}
6464

6565
{isSearching && searchResults.length === 0 && (
66-
<div
67-
data-testid="code-examples-no-results"
68-
className="py-4 text-center color-text-secondary"
69-
>
66+
<div data-testid="code-examples-no-results" className="py-4 text-center color-fg-muted">
7067
<div className="mb-3">
7168
<SearchIcon size={24} />{' '}
7269
</div>

‎components/landing/GuideCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ export const GuideCard = ({ guide }: Props) => {
1010
return (
1111
<div className="col-lg-4 col-12 mb-4">
1212
<a
13-
className="Box color-shadow-medium height-full d-block hover-shadow-large no-underline color-text-primary p-5"
13+
className="Box color-shadow-medium height-full d-block hover-shadow-large no-underline color-fg-default p-5"
1414
href={guide.href}
1515
>
1616
<h2 dangerouslySetInnerHTML={{ __html: guide.title }} />
1717
<p
18-
className="mt-2 mb-4 color-text-tertiary"
18+
className="mt-2 mb-4 color-fg-muted"
1919
dangerouslySetInnerHTML={{ __html: guide.intro || '' }}
2020
/>
2121

‎components/landing/LandingHero.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const LandingHero = () => {
4343
<FullLink
4444
key={link}
4545
href={link}
46-
className={cx('btn btn-large f4 mt-3 mr-3 ', i === 0 && 'btn-primary-matte')}
46+
className={cx('btn btn-large f4 mt-3 mr-3 ', i === 0 && 'btn-primary')}
4747
>
4848
{t(key)}
4949
</FullLink>

‎components/landing/LandingSection.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const LandingSection = ({ title, children, className, sectionLink, descri
1111
return (
1212
<div className={cx('container-xl px-3 px-md-6', className)} id={sectionLink}>
1313
{title && (
14-
<h2 className={cx('h1 color-text-primary', !description ? 'mb-3' : 'mb-4')}>
14+
<h2 className={cx('h1 color-fg-default', !description ? 'mb-3' : 'mb-4')}>
1515
{sectionLink ? (
1616
<a className="color-unset" href={`#${sectionLink}`}>
1717
{title}
@@ -22,10 +22,7 @@ export const LandingSection = ({ title, children, className, sectionLink, descri
2222
</h2>
2323
)}
2424
{description && (
25-
<div
26-
className="color-text-secondary f4"
27-
dangerouslySetInnerHTML={{ __html: description }}
28-
/>
25+
<div className="color-fg-muted f4" dangerouslySetInnerHTML={{ __html: description }} />
2926
)}
3027
{children}
3128
</div>

‎components/landing/ProductArticlesList.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const ProductTreeNodeList = ({ treeNode }: { treeNode: ProductTreeNode }) => {
5252
>
5353
<Link href={childNode.href}>{childNode.page.title}</Link>
5454
{childNode.page.documentType === 'mapTopic' ? (
55-
<small className="color-text-secondary d-inline-block">
55+
<small className="color-fg-muted d-inline-block">
5656
&nbsp;&bull; {childNode.childPages.length} articles
5757
</small>
5858
) : null}

‎components/landing/ProductLanding.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const ProductLanding = () => {
6565
)}
6666

6767
{featuredLinks.guideCards?.length > 0 && (
68-
<div className="color-bg-tertiary py-6">
68+
<div className="color-bg-subtle py-6">
6969
<LandingSection title={t('guides')} sectionLink="guides-2" className="my-6">
7070
<GuideCards />
7171
</LandingSection>

‎components/landing/ProductReleases.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ export function ProductReleases() {
2525
const secondPreviousVersion = `enterprise-server@${release.secondPreviousRelease}`
2626
return (
2727
<div key={releaseNumber} className="col-lg-4 col-12 mb-4">
28-
<div className="Box color-shadow-medium height-full d-block hover-shadow-large no-underline color-text-primary p-5">
28+
<div className="Box color-shadow-medium height-full d-block hover-shadow-large no-underline color-fg-default p-5">
2929
<h2>{allVersions[releaseVersion].versionTitle}</h2>
30-
<p className="mt-2 mb-4 color-text-tertiary">
30+
<p className="mt-2 mb-4 color-fg-muted">
3131
<ListUnorderedIcon />{' '}
3232
<Link
3333
href={`/${router.locale}/${releaseVersion}/admin/release-notes#${latestPatch.version}`}
@@ -36,7 +36,7 @@ export function ProductReleases() {
3636
</Link>{' '}
3737
({latestPatch.date})
3838
</p>
39-
<p className="mt-2 mb-4 color-text-tertiary">
39+
<p className="mt-2 mb-4 color-fg-muted">
4040
<ArrowUpIcon /> {t('upgrade_from')}{' '}
4141
<Link
4242
href={`/${router.locale}/${firstPreviousVersion}/admin/enterprise-management/upgrading-github-enterprise-server`}
@@ -50,7 +50,7 @@ export function ProductReleases() {
5050
{release.secondPreviousRelease}
5151
</Link>
5252
</p>
53-
<p className="mt-2 mb-4 color-text-tertiary">
53+
<p className="mt-2 mb-4 color-fg-muted">
5454
<FileIcon />{' '}
5555
<Link href={`/${router.locale}/${releaseVersion}`}>{t('browse_all_docs')}</Link>
5656
</p>

‎components/landing/RepoCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ type Props = {
88
export const RepoCard = ({ repo, href }: Props) => {
99
return (
1010
<a
11-
className="Box d-flex height-full color-shadow-medium hover-shadow-large no-underline color-text-primary p-4"
11+
className="Box d-flex height-full color-shadow-medium hover-shadow-large no-underline color-fg-default p-4"
1212
href={href || `https://github.com/${repo.repo}`}
1313
>
1414
<div className="flex-shrink-0 mr-3">
@@ -20,7 +20,7 @@ export const RepoCard = ({ repo, href }: Props) => {
2020
</div>
2121
<div className="flex-auto">
2222
<h4>{repo.repo}</h4>
23-
<p className="mt-1 color-text-tertiary">{repo.description}</p>
23+
<p className="mt-1 color-fg-muted">{repo.description}</p>
2424
</div>
2525
</a>
2626
)

‎components/landing/TableOfContents.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,10 @@ export const TableOfContents = (props: Props) => {
4848
)}
4949
</li>
5050
) : (
51-
<li key={href} className={cx('mb-3 border-bottom pb-2', isActive && 'color-auto-gray-4')}>
51+
<li key={href} className={cx('mb-3 border-bottom pb-2', isActive && 'color-fg-muted')}>
5252
<BumpLink as={Link} href={href} title={<h2 className="h4">{title}</h2>}>
5353
{intro && (
54-
<p
55-
className="f4 color-text-secondary"
56-
dangerouslySetInnerHTML={{ __html: intro }}
57-
/>
54+
<p className="f4 color-fg-muted" dangerouslySetInnerHTML={{ __html: intro }} />
5855
)}
5956
</BumpLink>
6057
</li>

‎components/landing/UserCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ type Props = {
88
export const UserCard = ({ user, href }: Props) => {
99
return (
1010
<a
11-
className="Box d-flex height-full color-shadow-medium hover-shadow-large no-underline color-text-primary p-4"
11+
className="Box d-flex height-full color-shadow-medium hover-shadow-large no-underline color-fg-default p-4"
1212
href={href || `https://github.com/${user.username}`}
1313
>
1414
<div className="flex-shrink-0 mr-3">
@@ -20,7 +20,7 @@ export const UserCard = ({ user, href }: Props) => {
2020
</div>
2121
<div className="flex-auto">
2222
<h4>{user.username}</h4>
23-
<p className="mt-1 color-text-tertiary">{user.description}</p>
23+
<p className="mt-1 color-fg-muted">{user.description}</p>
2424
</div>
2525
</a>
2626
)

‎components/page-footer/Contribution.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ export const Contribution = () => {
1313
return (
1414
<div className="f5 contribution">
1515
<h2 className="f4 mb-3">{t`title`}</h2>
16-
<p className="max-w-xs color-text-secondary mb-3">{t`body`}</p>
16+
<p className="max-w-xs color-fg-muted mb-3">{t`body`}</p>
1717
<a className="btn" href={contributionHref}>
1818
<GitPullRequestIcon size="small" className="octicon mr-1" />
1919
{t`button`}
2020
</a>
21-
<p className="color-text-secondary f6 mt-2">
21+
<p className="color-fg-muted f6 mt-2">
2222
{t`or`}{' '}
2323
<a
2424
href="https://github.com/github/docs/blob/main/CONTRIBUTING.md"

0 commit comments

Comments
 (0)