Primer CSS
The CSS implementation of GitHub's Primer Design System
Documentation
Our documentation site lives at primer.style/css. You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.
Install
This repository is distributed with npm. After installing npm, you can install @primer/css
with this command:
npm install --save @primer/css
Usage
The included source files are written in Sass using SCSS syntax. After installing with npm, you can add your project's node_modules
directory to your Sass include paths (AKA load paths in Ruby), then import it like this:
@import "@primer/css/index.scss";
You can import individual Primer modules directly from the @primer/css
package:
@import "@primer/css/core/index.scss";
@import "@primer/css/product/index.scss";
@import "@primer/css/marketing/index.scss";
Development
See DEVELOP.md for development docs.
Releasing (for GitHub staff)
You can find docs about our release process in RELEASING.md.
Global focus styles
:focus
and:focus-visible
styles fora, button, input, textarea, select
elementsoutline: 0;
from primer-css (there are some special edge cases)outline
instead ofbox-shadow
with an offset of 2px (no offset for form field elements)| element | img | | :- | :- | |
|
|
|
|
|
|
|
|
|
|
|
|
|
| input with state |
|
| tabnav |
|
| markdown toolbar |
|
input
|textarea
|button
|radio
|a
|checkbox
|select
|Inspiration/research: https://www.sarasoueidan.com/blog/focus-indicators/
/cc @primer/css-reviewers
Broken vertical font alignment on Fedora
Describe the bug Text is not properly vertically centered when using Firefox on Fedora 33.
To Reproduce Steps to reproduce the behavior:
Expected behavior The text marked in the screenshot below should be properly vertically centered.
Screenshots
Desktop (please complete the following information):
Additional context Fedora does not ship the
Helvetica
andArial
fonts used by Primer.Firefox on Fedora uses
Nimbus Sans
as a replacement forHelvetica
:If we remove
Helvetica
from the font declaration, the system usesLiberation Sans
, which looks okay-ish:Chinese text display font changed
Describe the bug When visiting repository with Chinese text, the font has changed from system default to Meiryo, a Japanese font that do not cover some Chinese characters leading to uneven reading experience. This seem to be related with https://github.com/primer/css/pull/1573
To Reproduce Please visit https://github.com/NightFurySL2001/TangYuan-font or any other repository with Chinese text.
Expected behavior The font used should be fitting the locale of markdown text or default system locale font.
Screenshots

Side note: this will be more prominent in Simplified Chinese than in Traditional Chinese text.
WIP: color modes docs
This PR is a WIP for improving the Primer CSS "Support -> Color system", "Support -> Variables", and "Utilities -> Colors" pages for a post-color-modes world.
Color scales
Now that most of the usable colors are represented by functional variables, there's less of a need to document the individual color scale values. However, I've included them just in case they're needed for some dotcom hacks.
These tables are automatically generated based on the values from Primer Primitives.
Functional variables
I had more trouble when starting to look into documenting the functional variables. There are a huge number of them, and arguably some of them probably shouldn't really be used by end-users of the system at all. For example,
--color-calendar-graph-day-L2-bg
serves a very specific purpose and that color shouldn't be used for any other components, even if the color matches, so does it need to be documented at all? Further, some of the values aren't colors at all, e.g.--color-btn-primary-shadow
is0 1px 0 rgba(27,31,35,0.1)
(and, again, is for a specific component, so should it be documented at all?)For this category of colors, I'm starting to lean toward hand-written documentation, detailing how to pick one of the reusable functional colors (e.g. how do I pick between
text-primary
vstext-secondary
vstext-tertiary
) rather than just generating a huge list of all the functional colors.Variables
For the "Support -> Variables" page, I think we can keep this the way it is, just with the Sass color variables removed (but leave the other Sass variables, like
$spacer-*
etc).Make brand-green AA compliant
Brand green was failing colour contrast checks. As referenced in github/github#40219.
The new green is now AA complaint and AAA complaint over 18pt.
@aaronshekey what do you think with your buttons? https://github.com/primer/primer/pull/92
Host image assets within package
Is your feature request related to a problem? Please describe.
Describe the solution you'd like
/images
folder to primer/css or host the images somewhere and provide full urls to themAdditional context @gladwearefriends brought this up as the missing assets were causing her builds to fail on a project outside of github/github
🚚 Move Keyboard Shortcuts
This moves the keyboard shortcuts component from github/github to Primer CSS.
TODO
TODO on .com
.badmono
https://github.com/github/github/pull/124900.kb-shortcut-dialog
https://github.com/github/github/pull/124900Tracking https://github.com/github/design-systems/issues/684
Trigger canary release on successful PR build
Update from @shawnbot
This PR adds some travis-ci config options that will run
script/cibuild
after the build succeeds. If this is a PR build (whenTRAVIS_EVENT_TYPE = pull_request
), then we publish a canary release to thecanary
npm dist-tag.We've stubbed out publish commands for release candidates and final releases, but for now those commands are just echoed rather than executed.
We've also eliminated our per-module build matrix and now run the tests for all modules in one go, which should speed up testing time significantly.
Primer monorepo
Moving Primer into a monorepo
This pr works towards moving the source files for Primer back into the Primer org, to be pulled into GitHub via npm. More context on this decision here, and here's an interesting post on why Babel is a monorepo.
To-do:
primer-css
Post-ship to-do:
Questions:
.gitignore
file or just the root?~~ - yes@primer/design-systems @muan @josh @mislav What other things do I need to take into account? Any questions, concerns? Let me know if you have any thoughts on using Lerna and Semantic Release—they look like good options and help us with some of our maintenance and publishing workflow issues. I'll need help once this is ready with switching GitHub over to pulling this in a dependency.
`.Box-row` corner radius fix
What are you trying to accomplish?
.Box-row
styling for the conditional corner radii. (As stated in this issue)What approach did you choose and why?
&:first-of-type
and&:last-of-type
to&:first-child
and&:last-child
. This makes sure that the rendering of the said styles are only applied if the.Box-row
is the first or the last child of the Box component.What should reviewers focus on?
.Box-body
element and.Box-row
elements are switched in the markup, will the styles be behaving the same way from the fix.Are additional changes needed?
Refactor Flash alert
What are you trying to accomplish?
This PR adds a new
Flash
component, meant to eventually replace our existingflash
alert. This update aims to fix long standing issues found in it, mainly regarding responsive support.✨ Link to Storybook ✨
Main updates:
A lot of the spacing values used in this refactor are hardcoded, and will benefit from the Primer Primitives spacing update once that's available. (link only available for Hubbers).
What approach did you choose and why?
I've kept the current
flash
alert in place, and created a newflash-refactor.scss
file, in a similar fashion to how @langermank has considered the refactor for the Button component (#1874).After all instances of
flash
are replaced with this new component (specially after updating its ViewComponent, we can clean up these files.Are additional changes needed?
As described in https://github.com/github/primer/issues/62 (internal to hubbers), some alerts may have multiple buttons. This refactor hasn't addressed for these use cases specifically.
Closes https://github.com/github/primer/issues/154.
Bump semver from 7.3.7 to 7.3.8
Bumps semver from 7.3.7 to 7.3.8.
Release notes
Sourced from semver's releases.
Changelog
Sourced from semver's changelog.
Commits
dc0fe20
chore: release 7.3.8 (#486)40f7dfc
chore(ci): dont set workspaces flag for tests (#487)d8ef32c
fix: add support for node.js esm auto exports (#383)7209b14
docs: update range.js comments to clarify the caret ranges examples (#477)6010883
chore: postinstall for dependabot template-oss PR802a66d
chore: bump@npmcli/template-oss
from 4.3.2 to 4.4.4f97d600
chore: bump@npmcli/template-oss
from 3.6.0 to 4.3.2bce4258
chore: postinstall for dependabot template-oss PR7d28971
chore: bump@npmcli/template-oss
from 3.5.0 to 3.6.0e9a1f26
chore: bump@npmcli/template-oss
from 3.4.2 to 3.4.3 (#457)Maintainer changes
This version was pushed to npm by gar, a new releaser for semver since your current version.
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump @changesets/cli from 2.25.2 to 2.26.0
Bumps @changesets/cli from 2.25.2 to 2.26.0.
Release notes
Sourced from
@changesets/cli
's releases.Commits
8447c67
Version Packages (#1034)521205d
Add support for thechangedFilePatterns
config (#1033)b360d50
Improve the error message for a missingGITHUB_TOKEN
to include the informa...c606dc6
Fixed a small typo in the README (#1031)598136a
Cleanup@changesets/git
tests (#1029)e02a0c4
Update node version used by the Release flow (#1013)e0459f7
Update TypeScript, ESLint, Babel and Jest dependencies (#1012)718b2ef
Refactor the test suite from external fixtures to inline ones (#1008)4acaff7
Fixed a typo in a variable name (#1005)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump table from 6.8.0 to 6.8.1
Bumps table from 6.8.0 to 6.8.1.
Release notes
Sourced from table's releases.
Commits
28e8e6e
fix: Correct ansi cell width calculation (#214)c73498f
chore(deps): bump minimist from 1.2.5 to 1.2.6 (#204)d5e71bf
chore(deps): bump moment from 2.29.1 to 2.29.2 (#206)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump fs-extra from 10.1.0 to 11.1.0
Bumps fs-extra from 10.1.0 to 11.1.0.
Changelog
Sourced from fs-extra's changelog.
Commits
0e76a72
11.1.0ab86a8a
Re-add package.json main field for TypeScript support (#981)8e7793b
Update action versions (#978)4daff17
11.0.0fd50986
BREAKING: ESM support (#974)1a3205d
Remove unneeded and buggy stats check (#976)b3146f0
Run copy*() filter before running fs.stat() on items (#971)1d1622b
Upgrade devDeps (#975)9dbf173
Add promise support for fs.readv (#970)5623ba3
BREAKING: Drop Node v12 support; require v14.14+ (#969)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump tj-actions/changed-files from 34 to 35
Bumps tj-actions/changed-files from 34 to 35.
Release notes
Sourced from tj-actions/changed-files's releases.
... (truncated)
Changelog
Sourced from tj-actions/changed-files's changelog.
... (truncated)
Commits
392359f
chore: update the test (#909)b4afd86
Updated README.md (#908)171fd35
add raw-output option for json output (#900)232c8a3
docs: add adonisgarciac as a contributor for code, and doc (#907)8fb979d
Upgraded to v35.1.2 (#905)7f33882
Updated README.md (#904)8aef40a
Update action.yml7fcaecb
Updated README.md (#903)8bb2cb2
feat: add support for excluding matched directories (#902)0883366
chore(deps): update tj-actions/github-changelog-generator action to v1.17 (#899)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump actions/stale from 6 to 7
Bumps actions/stale from 6 to 7.
Release notes
Sourced from actions/stale's releases.
Changelog
Sourced from actions/stale's changelog.
... (truncated)
Commits
6f05e42
draft release for v7.0.0 (#888)eed91cb
Update how stale handles exempt items (#874)10dc265
Merge pull request #880 from akv-platform/update-stale-repo9c1eb3f
Update .md files and allign build-test.yml with the current test.ymlbc357bd
Update .github/workflows/release-new-action-version.yml690ede5
Update .github/ISSUE_TEMPLATE/bug_report.mdafbcabf
Merge branch 'main' into update-stale-repoe364411
Update name of codeql.yml file627cef3
fix print outputs step (#859)975308f
Merge pull request #876 from jongwooo/chore/use-cache-in-check-distDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)