The CSS design system that powers GitHub

  • By Primer
  • Last update: Jan 7, 2023
  • Comments: 17

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.

License

MIT © GitHub

Github

https://github.com/primer/css

Comments(17)

  • 1

    Global focus styles

    • Adds global :focus and :focus-visible styles for a, button, input, textarea, select elements
    • Removes most outline: 0; from primer-css (there are some special edge cases)
    • Uses outline instead of box-shadow with an offset of 2px (no offset for form field elements)

    | element | img | | :- | :- | | input | primer input component focused | | textarea | primer textarea component focused | | button | primer button component focused | | radio | primer radio component focused | | a | primer link component focused | | checkbox | primer checkbox component focused | | select | primer select component focused | | input with state | primer input component focused | | tabnav | primer tabnav component focused | | markdown toolbar | markdown toolbar button focused |

    Inspiration/research: https://www.sarasoueidan.com/blog/focus-indicators/

    • Fixes: https://github.com/github/primer/issues/410

    /cc @primer/css-reviewers

  • 2

    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:

    1. Get a working installation of Fedora 33 (VM, live USB stick, etc.)
    2. In Firefox, open https://github.com/mdo
    3. See how the font is not aligned properly as marked in the screenshot below

    Expected behavior The text marked in the screenshot below should be properly vertically centered.

    Screenshots

    Screenshot

    Desktop (please complete the following information):

    • OS: Fedora 33
    • Browser: Firefox
    • Version: 84.0

    Additional context Fedora does not ship the Helvetica and Arial fonts used by Primer.

    Firefox on Fedora uses Nimbus Sans as a replacement for Helvetica:

    Screenshot

    If we remove Helvetica from the font declaration, the system uses Liberation Sans, which looks okay-ish:

    Screenshot

  • 3

    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. image

    Screenshots image image

    Side note: this will be more prominent in Simplified Chinese than in Traditional Chinese text.

  • 4

    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.

    image

    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 is 0 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 vs text-secondary vs text-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).

  • 5

    Make brand-green AA compliant

    Brand green was failing colour contrast checks. As referenced in github/github#40219.

    green

    The new green is now AA complaint and AAA complaint over 18pt.

    screen shot 2015-04-30 at 14 49 07

    @aaronshekey what do you think with your buttons? https://github.com/primer/primer/pull/92

  • 6

    Host image assets within package

    Is your feature request related to a problem? Please describe.

    • Users of Primer/CSS outside of github/github cannot use form validation styles because the assets live in github/github

    Describe the solution you'd like

    • Not sure what the solution here would be - either we add an /images folder to primer/css or host the images somewhere and provide full urls to them

    Additional context @gladwearefriends brought this up as the missing assets were causing her builds to fail on a project outside of github/github

  • 7

    ūüöö Move Keyboard Shortcuts

    This moves the keyboard shortcuts component from github/github to Primer CSS.

    TODO

    • [x] Add styles
    • [ ] ~~Add documentation~~ See https://github.com/primer/css/pull/904#issuecomment-535363707
    • [x] Improve/refactor the CSS without breaking anything

    TODO on .com

    • [x] Remove .badmono https://github.com/github/github/pull/124900
    • [x] Remove .kb-shortcut-dialog https://github.com/github/github/pull/124900
    • [x] :fire: Remove keyboard-shortcuts.scss.

    Tracking https://github.com/github/design-systems/issues/684

  • 8

    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 (when TRAVIS_EVENT_TYPE = pull_request), then we publish a canary release to the canary 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.

  • 9

    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.

    • All packages will live in one repo to make it easier to make updates across Primer
    • Individual packages and meta-packages will still be independently versioned and distributed via npm

    To-do:

    • [x] Remove git logs from packages
    • [x] Add ignore for npm-debug.log (and remove any existing logs)
    • [x] Remove individual module contributing guidelines and add one to the root directory
    • [x] Update git and issue urls to point to primer-css
    • [x] Setup Lerna for easier multi-package management
    • [x] Check tests still work (esp primer-module-build)
    • [x] Update Travis config
    • [x] Create pre-release for testing with new style guide docs and GitHub
    • [x] Switch GitHub over to pulling in primer, remove and re-org stylesheets directory https://github.com/github/github/pull/74495

    Post-ship to-do:

    • Add installation instructions for design-systems so that they can run Lerna etc. and publish releases
    • Figure out how to manage global and individual package and meta-package changelogs (perhaps using lerna/changelog)
    • Setup github releases (perhaps using zeit/release)
    • Deprecate old packages and their repos
    • Add doc explaining decision for mono repo (like Babel does)
    • Explore using Semantic Release to help us better manage versions and the changelog (I think this is low priority but would like to see what @jonrohan and Shawn think once we've used the new setup with Lerna for a while)

    Questions:

    • ~~Should each package and meta-package have it's own .gitignore file or just the root?~~ - yes
    • ~~Should each package and meta-package have it's own LICENSE 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.

  • 10

    `.Box-row` corner radius fix

    What are you trying to accomplish?

    • Fix the .Box-row styling for the conditional corner radii. (As stated in this issue)

    What approach did you choose and why?

    • Changed the pseudo-class from &: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?

    • The fix should have the expected behavior, however I do like to perform a few more additional tests for a few cases. For example, if the order of the .Box-body element and .Box-row elements are switched in the markup, will the styles be behaving the same way from the fix.
    • If the behavior fails, I suggest playing with the pseudo-class combinations. Maybe we can find a fix that can patch this issue through that.

    Are additional changes needed?

    • [x] No, this PR should be ok to ship as is. ūüöĘ
  • 11

    Refactor Flash alert

    What are you trying to accomplish?

    This PR adds a new Flash component, meant to eventually replace our existing flash alert. This update aims to fix long standing issues found in it, mainly regarding responsive support.

    ‚ú® Link to Storybook ‚ú®

    Main updates:

    Improved alignment and spacing

    Screen Shot 2022-03-03 at 15 44 08

    Screen Shot 2022-03-03 at 15 47 47

    Screen Shot 2022-03-03 at 15 43 01

    Screen Shot 2022-03-03 at 15 44 37

    Responsive support

    Screen Shot 2022-03-03 at 15 45 32

    Screen Shot 2022-03-03 at 15 45 05

    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 new flash-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.

    • [ ] No, this PR should be ok to ship as is. ūüöĘ

    Closes https://github.com/github/primer/issues/154.

  • 12

    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.

    v7.3.8

    7.3.8 (2022-10-04)

    Bug Fixes

    Documentation

    Changelog

    Sourced from semver's changelog.

    7.3.8 (2022-10-04)

    Bug Fixes

    Documentation

    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 PR
    • 802a66d chore: bump @‚Äčnpmcli/template-oss from 4.3.2 to 4.4.4
    • f97d600 chore: bump @‚Äčnpmcli/template-oss from 3.6.0 to 4.3.2
    • bce4258 chore: postinstall for dependabot template-oss PR
    • 7d28971 chore: bump @‚Äčnpmcli/template-oss from 3.5.0 to 3.6.0
    • e9a1f26 chore: bump @‚Äčnpmcli/template-oss from 3.4.2 to 3.4.3 (#457)
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by gar, a new releaser for semver since your current version.


    Dependabot compatibility score

    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)
  • 13

    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.

    @‚Äčchangesets/cli@‚Äč2.26.0

    Minor Changes

    • #1033 521205d Thanks @‚ÄčAndarist! - A new config-level changedFilePatterns option has been added. You can configure it with an array of glob patterns like here:

      // .changeset/config.json
      {
        "changedFilePatterns": ["src/**"]
      }
      

      Files that do not match the configured pattern won't contribute to the "changed" status of the package to which they belong. This both affects changesets add and changeset status.

    Patch Changes

    Commits

    Dependabot compatibility score

    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)
  • 14

    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.

    v6.8.1

    6.8.1 (2022-11-02)

    Bug Fixes

    Commits

    Dependabot compatibility score

    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)
  • 15

    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.

    11.1.0 / 2022-11-29

    • Re-add main field to package.json for better TypeScript compatibility (#979, #981)

    11.0.0 / 2022-11-28

    Breaking Changes

    • Don't allow requiring fs-extra/lib/SOMETHING (switched to exports) (#974)
    • Require Node v14.14+ (#968, #969)

    New Features

    • Add fs-extra/esm for ESM named export support; see docs for details (#746, #974)
    • Add promise support for fs.readv() (#970)

    Bugfixes

    • Don't stat filtered items in copy* (#965, #971)
    • Remove buggy stats check in copy (#918, #976)
    Commits

    Dependabot compatibility score

    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)
  • 16

    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.

    v35

    Changes in v35.2.0

    What's Changed

    New Contributors

    Full Changelog: https://github.com/tj-actions/changed-files/compare/v35...v35.2.0


    Changes in v35.1.2

    What's Changed

    Full Changelog: https://github.com/tj-actions/changed-files/compare/v35...v35.1.2


    Changes in v35.1.1

    What's Changed

    Full Changelog: https://github.com/tj-actions/changed-files/compare/v35...v35.1.1


    Changes in v35.1.0

    What's Changed

    Full Changelog: https://github.com/tj-actions/changed-files/compare/v35...v35.1.0


    ... (truncated)

    Changelog

    Sourced from tj-actions/changed-files's changelog.

    v35 (2022-12-30)

    Full Changelog

    Fixed bugs:

    • [BUG] files_ignore used with files not ignoring as expected #901

    Merged pull requests:

    v35.1.2 (2022-12-29)

    Full Changelog

    Closed issues:

    • Dependency Dashboard #27

    Merged pull requests:

    v35.1.1 (2022-12-26)

    Full Changelog

    Implemented enhancements:

    • [Feature] Output which file changed from files input #895

    Fixed bugs:

    • pipeline failed in tj-action #894

    Merged pull requests:

    ... (truncated)

    Commits

    Dependabot compatibility score

    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)
  • 17

    Bump actions/stale from 6 to 7

    Bumps actions/stale from 6 to 7.

    Release notes

    Sourced from actions/stale's releases.

    v7.0.0

    ‚ö†ÔłŹ This version contains breaking changes ‚ö†ÔłŹ

    What's Changed

    Breaking Changes

    • In this release we prevent this action from managing the stale label on items included in exempt-issue-labels and exempt-pr-labels
    • We decided that this is outside of the scope of this action, and to be left up to the maintainer

    New Contributors

    Full Changelog: https://github.com/actions/stale/compare/v6...v7.0.0

    v6.0.1

    Update @‚Äčactions/core to 1.10.0 #839

    Full Changelog: https://github.com/actions/stale/compare/v6.0.0...v6.0.1

    Changelog

    Sourced from actions/stale's changelog.

    Changelog

    [7.0.0]

    :warning: Breaking change :warning:

    [6.0.1]

    Update @‚Äčactions/core to v1.10.0 (#839)

    [6.0.0]

    :warning: Breaking change :warning:

    Issues/PRs default close-issue-reason is now not_planned(#789)

    [5.1.0]

    Don't process stale issues right after they're marked stale [Add close-issue-reason option]#764#772 Various dependabot/dependency updates

    4.1.0 (2021-07-14)

    Features

    4.0.0 (2021-07-14)

    Features

    Bug Fixes

    • dry-run: forbid mutations in dry-run (#500) (f1017f3), closes #499
    • logs: coloured logs (#465) (5fbbfba)
    • operations: fail fast the current batch to respect the operations limit (#474) (5f6f311), closes #466
    • label comparison: make label comparison case insensitive #517, closes #516
    • filtering comments by actor could have strange behavior: "stale" comments are now detected based on if the message is the stale message not who made the comment(#519), fixes #441, #509, #518

    Breaking Changes

    ... (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-repo
    • 9c1eb3f Update .md files and allign build-test.yml with the current test.yml
    • bc357bd Update .github/workflows/release-new-action-version.yml
    • 690ede5 Update .github/ISSUE_TEMPLATE/bug_report.md
    • afbcabf Merge branch 'main' into update-stale-repo
    • e364411 Update name of codeql.yml file
    • 627cef3 fix print outputs step (#859)
    • 975308f Merge pull request #876 from jongwooo/chore/use-cache-in-check-dist
    • Additional commits viewable in compare view

    Dependabot compatibility score

    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)