The CSS design system that powers GitHub

Overview

Primer CSS

The CSS implementation of GitHub's Primer Design System

Migrating

🚨 If you currently use the primer or primer--prefixed npm packages, please read the migration guide!

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.

Documentation

The Primer CSS docs site is deployed from this repo with primer/deploy. See the development docs for more info.

License

MIT © GitHub

Comments
  • Global focus styles

    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

    major release 
    opened by langermank 25
  • Broken vertical font alignment on Fedora

    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

    status: needs investigation 
    opened by nikwen 25
  • Chinese text display font changed

    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.

    opened by NightFurySL2001 18
  • WIP: color modes docs

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

    opened by BinaryMuse 16
  • Make brand-green AA compliant

    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

    opened by amosie 16
  • Host image assets within package

    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

    type: enhancement ⭐️rep 💓collab type: bug 🐞 Stale 
    opened by emplums 15
  • 🚚 Move Keyboard Shortcuts

    🚚 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

    minor release Tag: Enhancement 
    opened by simurai 14
  • Trigger canary release on successful PR build

    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.

    opened by jonrohan 14
  • Primer monorepo

    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.

    opened by broccolini 14
  • `.Box-row` corner radius fix

    `.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. 🚢
    Stale 
    opened by MatteuSan 13
  • Refactor Flash alert

    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.

    minor release Stale 
    opened by vdepizzol 13
  • Vote

    Vote

    `

    vote

     <script src="like.js">const button = document.querySelector(".button");
    

    const likes = document.querySelector(".likes");

    let like = true; let count = likes.textContent;

    button.addEventListener("click", () => { count = like ? ++count : --count; like = !like; likes.textContent = count; button.classList.toggle("button-active"); likes.classList.toggle("likes-active"); });

    `
    opened by sifat077 0
  • Release Tracking

    Release Tracking

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    @primer/[email protected]

    Patch Changes

    opened by primer-css 1
  • Invalid CSS

    Invalid CSS

    There are too many CSS errors in the compiled version. See: https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Funpkg.com%2F%40primer%2Fcss%40%5E20.2.4%2Fdist%2Fprimer.css&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en.

    Errors in CSS.

    I noticed this error way back while I was writing an article about CSS validation, but I forgot to open the issue.

    opened by maliMirkec 0
  • .markdown-body assumes the first element is always visible

    .markdown-body assumes the first element is always visible

    Describe the bug

    This CSS assumes that the first element is visible So if you have

    <div class="markdown-body">
      <h2>Heading</h2>
      <p>Text</p>
      <h2>Heading 2</h2>
      <p>Text</p>
    </div>
    

    makes it so that that first <h2>Heading</h2> always gets margin-top: 0 !important;. But if you have...

    <div class="markdown-body">
      <div style="display:none" id="note">Note here...</div>
      <h2>Heading</h2>
      <p>Text</p>
      <h2>Heading 2</h2>
      <p>Text</p>
    </div>
    

    Now, that margin-top: 0 !important; gets set on <div style="display:none" id="note">Note here...</div> and not on the first visible one. That means that the HTML snippets appear visually different when they should appear the same.

    To Reproduce (see above)

    Expected behavior (see above)

    If I do document.querySelector('#note').css.style = 'block', only then do I expect that <div style="display:block" id="note">Note here...</div> to get the margin-top: 0 !important; style.

    Screenshots If applicable, add screenshots to help explain your problem.

    Desktop (please complete the following information):

    • OS: [e.g. iOS]
    • Browser [e.g. chrome, safari]
    • Version [e.g. 22]

    Smartphone (please complete the following information):

    • Device: [e.g. iPhone6]
    • OS: [e.g. iOS8.1]
    • Browser [e.g. stock browser, safari]
    • Version [e.g. 22]

    Additional context Add any other context about the problem here.

    opened by peterbe 4
  • It is ok in most (modern) cases. I'm looking forward to GitHub reintroducing `system-ui` and overridable font settings.

    It is ok in most (modern) cases. I'm looking forward to GitHub reintroducing `system-ui` and overridable font settings.

        It is ok in most (modern) cases. I'm looking forward to GitHub reintroducing `system-ui` and overridable font settings.
    

    Originally posted by @NightFurySL2001 in https://github.com/primer/css/issues/1209#issuecomment-1259409426

    opened by andreea199515 0
  • DOM previews within the documentation are broken

    DOM previews within the documentation are broken

    Describe the bug DOM previews within documentation aren't loading anymore.

    To Reproduce Steps to reproduce the behavior:

    1. Go to flexbox documentation
    2. The previews are white and don't load

    Expected behavior See previews

    Screenshots Broken previews screenshot

    Desktop (please complete the following information):

    • OS: MacOS
    • Browser: Safari
    • Version: 15.6.1

    Additional context This was reported internally as well.

    type: bug 🐞 
    opened by maximedegreve 2
Releases(v20.8.0)
Owner
Primer
Components, design guidelines, and tooling for GitHub's design system.
Primer
Salesforce Lightning Design System

Salesforce Lightning Design System Welcome to the source code repository for Salesforce Lightning Design System, brought to you by Salesforce UX. SLDS

Salesforce UX 3.4k Dec 29, 2022
:mountain_bicyclist: Landing Pages of Ant Design System

Ant Design Landing Landing Pages of Ant Design System English | 简体中文 What is Landing? Landing is a template built by Ant Motion's motion components. I

Ant Design Team 5.2k Dec 31, 2022
Orange Design System theme for Storybook

ODS Storybook Theme Orange Design System Storybook Theme provides a Storybook theme for Orange. Quick start Install with npm: npm install ods-storyboo

Orange 3 Jan 10, 2022
Materialize, a CSS Framework based on Material Design

MaterializeCSS Materialize, a CSS Framework based on material design. -- Browse the docs -- Table of Contents Quickstart Documentation Supported Brows

Alvin Wang 38.8k Jan 2, 2023
Material Design Components in HTML/CSS/JS

Material Design Lite An implementation of Material Design components in vanilla CSS, JS, and HTML. Material Design Lite (MDL) lets you add a Material

Google 32.1k Jan 4, 2023
Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all

Krish Dev DB 1.1k Jan 2, 2023
Reasonable System for CSS Stylesheet Structure

Viewing this from GitHub? Visit the website for the full experience. rscss.io → rscss Styling CSS without losing your sanity Reasonable System for CSS

Rico Sta. Cruz 3.9k Dec 21, 2022
Modular and customizable Material Design UI components for the web

Material Components for the web Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX

Material Components 16.6k Jan 3, 2023
A responsive HTML template for coding projects with a clean, user friendly design. Crafted with the latest web technologies, the template is suitable for landing pages and documentations.

Scribbler - a responsive HTML template for coding projects and documentations Scribbler is a responsive HTML/CSS/Javascript template designed for deve

Amie Chen 394 Jan 1, 2023
Material Design Based One Page HTML Template

Material Design One Page HTML Template MD One page template is fully responsive and free to use. This HTML template is based on Materialize, a CSS Fra

Joash 587 Jan 2, 2023
Cool Boostrap Design form for Payout and Register.

Cool Boostrap Design form for Payout and Register. Design for the Payment form you can find the whole Boostrap code in the "payout.html" file. Design

Gabriel Dimitrievski 99 Oct 10, 2022
MDUI 是一个基于 Material Design 的前端框架。

MDUI MDUI 是一个基于 Material Design 的前端框架。 QQ群:635509201 中文文档 特性 轻量级 CSS 文件仅 32KB minified + gzip JavaScript 文件仅 19KB minified + gzip 多主题 CSS 文件中已经包含了 19种

zdhxiong 3.5k Jan 2, 2023
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library

Basscss Low-level CSS toolkit – the original Functional CSS library https://basscss.com Lightning-Fast Modular CSS with No Side Effects Basscss is a l

Basscss 5.8k Dec 31, 2022
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

FrontAid CMS 104 Dec 8, 2022
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

null 210 Dec 13, 2022
Easily create css variables without the need for a css file!

Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u

Mert Aşan 111 Dec 22, 2022
Cooltipz.css - A highly customisable, minimal, pure CSS tooltip library

Cooltipz.css - Cool tooltips Cool customisable tooltips made from pure CSS Lightweight • Accessible • Customisable • Simple Cooltipz.css is a pure CSS

Jack Domleo 110 Dec 24, 2022