primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-06 05:33:07 +03:00
Code Issues Projects Releases Wiki Activity

Merge branch 'release-10.9.0' into remove-invalid-button-classes

Browse Source
This commit is contained in:
Shawn Allen 2018-10-17 13:46:41 -07:00 committed by GitHub
commit ef3260f7ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
65 changed files with 20733 additions and 885 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
.github/CONTRIBUTING.md vendored
View File

@ -1,8 +1,8 @@
## Contributing
[fork]: https://github.com/github/primer/fork
[pr]: https://github.com/github/primer/compare
[style]: http://primer.github.io/guidelines/
[fork]: https://github.com/primer/primer/fork
[pr]: https://github.com/primer/primer/compare
[style]: https://styleguide.github.com/primer/principles/
Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great.
@ -12,7 +12,6 @@ The issue tracker is the preferred channel for [bug reports](#bug-reports), [fea
* Please **do not** use the issue tracker for personal support requests.
* Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of others.
* Please **do not** open issues or pull requests regarding the code in [`Normalize`](https://github.com/necolas/normalize.css) (open them in their respective repositories).
## Bug reports
@ -20,13 +19,13 @@ A bug is a _demonstrable problem_ that is caused by the code in the repository.
Guidelines for bug reports:
0. **Validate and lint your code** — [validate your HTML](http://html5.validator.nu) to ensure your problem isn't caused by a simple error in your own code.
1. **Validate and lint your code** — [validate your HTML](http://html5.validator.nu) to ensure your problem isn't caused by a simple error in your own code.
1. **Use the GitHub issue search** — check if the issue has already been reported.
2. **Use the GitHub issue search** — check if the issue has already been reported.
2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` or development branch in the repository.
3. **Check if the issue has been fixed** — try to reproduce it using the latest `master` branch in the repository.
3. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example.
4. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example.
A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? Do other browsers show the bug differently? What would you expect to be the outcome? All these details will help people to fix any potential bugs.
@ -61,10 +60,9 @@ Anyone can open a pull request on Primer. You do not need to work at GitHub or b
1. Fork and clone [this repository](https://github.com/primer/primer).
2. Configure and install the dependencies: `npm install`
3. Check out the dev branch `git checkout dev`
3. Create a new branch from dev `git checkout -b my-branch-name`
3. Create a new branch from master `git checkout -b my-branch-name`
4. Make your changes and commit them.
5. Push your branch and open a pull request against `dev`. Add a comment describing your proposed changes and request a review from `@primer/ds-core`.
5. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/ds-core`.
6. Wait for CI tests to finish.
- If the tests pass, you should see a status check telling you which alpha version of primer you can install with npm to test your work in other projects.
- If the tests fail, review the logs and address any issues.
@ -77,6 +75,111 @@ Here are a few things you can do that will increase the likelihood of your pull
- Keep your change as focused as possible. If there are multiple changes you would like to make that are not dependent upon each other, consider submitting them as separate pull requests.
- Write a [good commit message](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html).
## Releasing a new Primer version 🎉
This section is targeted at maintainers of primer, to instruct them on the processes for releasing a new version.
### In `primer/primer`:
1. Find or create a new pull request with a release branch from `master` and name it `release-<version>`.
(CI will publish a release candidate version to npm for branches prefixed with `release`. These version numbers have a `rc.<number>` suffix on them)
For the pull request you can use the following template.
```md
# Primer Minor Release
Tracking Issue for next release: 📦 **0.0.0**
Approximate release date: 📆
### Must
- [ ]
### Should
- [ ]
### Could
- [ ]
----
### Ship checklist
- [ ] Update CHANGELOG
- [ ] Run version bump
- [ ] Update primer.github.io
- [ ] Update github/github
- [ ] Update the style guide
- [ ] Update the release tag note
- [ ] Create a new pull request for the next release
/cc @primer/ds-core
```
2. Go through the tracking issue and make sure everything that should be merged in is merged in.
3. Once your builds finish, click on the details links for the continuous-integration/travis-ci/push build. Expand the `Deploying application` output and you should be able to find an outputted change log here. Copy this and update the [CHANGELOG.md](https://github.com/primer/primer/blob/master/CHANGELOG.md) file.
4. Run the version bump in your terminal: `npm run bump`.
5. Test your changes with the latest release candidate version in the appropriate places (styleguide, storybook, github/github).
6. Once the release PR is approved and you've done necessary testing, merge to `master`. This will trigger a publish to npm.
### In `github/github`:
1. Create a new branch
2. Update the primer version in your terminal `bin/npm install primer@<version>`.
3. Update `stylelint-config-primer` in your terminal to the appropriate version `bin/npm install stylelint-config-primer@latest`.
4. If you need to make changes to github/github due to the Primer release, make a separate branch. When ready, merge that branch into your release branch.
5. Add reviewers.
6. Check that every deleted vendor file has an accompanying updated vendor file and that the version numbers look correct.
7. Test on review-lab.
8. When ready, merge! 🎉
## Other items that need to be done after publishing Primer
#### Update the Style Guide
1. In [github/styleguide](https://github.com/github/styleguide), update `primer` to your newly released version in your terminal:
`npm install primer@latest`
2. Then run: `script/update-primer-docs`.
3. Commit changes, make PR, get it approved, merge! 🚀
#### Update [primer.github.io](primer.github.io)
1. Edit [index.html](https://github.com/primer/primer.github.io/blob/master/index.html) to include the latest version.
#### Update Storybook
1. Pull the latest from master on primer/primer (after merging in release branch).
2. Run `npm run publish-storybook`.
#### Publish release tag
1. Create a new release tag [here](https://github.com/primer/primer/releases/new).
2. Copy the changes from the [CHANGELOG](https://github.com/primer/primer/blob/master/CHANGELOG.md) and paste it into the release notes.
3. Publish 🎉
## Resources
- [Contributing to Open Source on GitHub](https://guides.github.com/activities/contributing-to-open-source/)

35
.github/ISSUE_TEMPLATE/primer-bug-report.md vendored Normal file
View File

@ -0,0 +1,35 @@
---
name: Primer bug report
about: Create a report to help us improve primer
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**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.

17
.github/ISSUE_TEMPLATE/primer-feature-request.md vendored Normal file
View File

@ -0,0 +1,17 @@
---
name: Primer feature request
about: Suggest an idea for this project
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.

35
.github/ISSUE_TEMPLATE/style-guide-bug-report.md vendored Normal file
View File

@ -0,0 +1,35 @@
---
name: Style guide bug report
about: Create a report to help us improve
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**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.

4
.github/pull_request_template.md vendored
View File

@ -1,6 +1,4 @@
- [ ] First, change the base branch from "master" to "dev".
- [ ] Next, briefly describe your proposal in the title.
- [ ] First, briefly describe your proposal in the title.
- [ ] Fixes: # (type an issue number after the # if applicable)

5
.travis.yml
View File

@ -1,11 +1,9 @@
language: node_js
node_js:
- 7
- 8
env:
global:
# npm
- secure: "EZewKKWQXmtCwPtYrPZq4OQblv2OyXR61qBIl3pOxGNVG2BCjD6VOgSaiYqkA9Qbt+ihfwQkiiLvTB68gbvRSiBFV9i+XLzKzt4S8CDI5RhTLAxZB3eQFVZRYzldchzWI4sdNhTvYS1kYXmsXQZD6vJmPSnFvOI/ddfzqvnNL4M="
# github
- secure: "J+1oWjvvXjyrwkY/4IFWKdN/weFmQcPwlRuFG4R0Gb3rYe4nqtC9l68sJvmS8asc8dQMhOhcUZCH6sjvo7l2WD4NuK4umPSbs+rJNUsfbvH4pZjStQIj/3ll1OfQelGDWAYQWhIfciYY4F3Bp0ZWTfKOppLQ2AVIYu1fPVXDdlo="
# github changelog
@ -13,6 +11,7 @@ env:
script:
- npm test
- script/check-versions
after_success:
# this will short-circuit the publish step if it fails to interpolate $NPM_API_KEY

54
CHANGELOG.md
View File

@ -1,4 +1,56 @@
## 10.6.1
# 10.9.0
# 10.8.1
#### :bug: Bug Fix
* [#554](https://github.com/primer/primer/pull/554) Fixes peer dependency issues ([@emplums](https://github.com/emplums))
#### :memo: Documentation
* [#554](https://github.com/primer/primer/pull/554) Updates releasing documentation ([@emplums](https://github.com/emplums))
#### :rocket: Enhancement
* [#555](https://github.com/primer/primer/pull/555) Add version check to CI ([@shawnbot](https://github.com/shawnbot))
# 10.8.0
#### :rocket: Enhancement
* [#525](https://github.com/primer/primer/pull/525) Add $spacer-0 alias. ([@AustinPaquette](https://github.com/AustinPaquette))
* [#522](https://github.com/primer/primer/pull/522) Add .BtnGroup-parent, deprecate .BtnGroup-form. ([@muan](https://github.com/muan))
* [#544](https://github.com/primer/primer/pull/544) Add lh-0 utility class. ([@shawnbot](https://github.com/shawnbot))
* [#548](https://github.com/primer/primer/pull/548) Add text underline utility. ([@AustinPaquette](https://github.com/AustinPaquette))
* [#549](https://github.com/primer/primer/pull/549) Add .user-select-none utility class. ([@AustinPaquette](https://github.com/AustinPaquette))
#### :memo: Documentation
* [#528](https://github.com/primer/primer/pull/528) Update release docs. ([@emplums](https://github.com/emplums))
#### Committers: 3
- Austin Paquette ([AustinPaquette](https://github.com/AustinPaquette))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- Mu-An Chiou ([@muan](https://github.com/muan))
- Emily Plummer ([@emplums](https://github.com/emplums))
# 10.7.0
#### :nail_care: Polish
* [#511](https://github.com/primer/primer/pull/511) change double quotes to single quotes in Avatar stack stories. ([@AustinPaquette](https://github.com/AustinPaquette))
#### :memo: Documentation
* [#520](https://github.com/primer/primer/pull/520) Update issue templates. ([@broccolini](https://github.com/broccolini))
* [#516](https://github.com/primer/primer/pull/516) Fix modules/primer-product/README.md. ([@9585999](https://github.com/9585999))
* [#513](https://github.com/primer/primer/pull/513) Deleting the dev branch workflow instructions. ([@jonrohan](https://github.com/jonrohan))
* [#507](https://github.com/primer/primer/pull/507) Moving the color docs to the style guide. ([@jonrohan](https://github.com/jonrohan))
#### :house: Internal
* [#517](https://github.com/primer/primer/pull/517) Modifying notify script to publish from each package. ([@jonrohan](https://github.com/jonrohan))
* [#515](https://github.com/primer/primer/pull/515) Auto publish storybook. ([@jonrohan](https://github.com/jonrohan))
* [#510](https://github.com/primer/primer/pull/510) [WIP] Patch release 10.6.2. ([@shawnbot](https://github.com/shawnbot))
#### Committers: 5
- Austin Paquette ([AustinPaquette](https://github.com/AustinPaquette))
- Diana Mounter ([broccolini](https://github.com/broccolini))
- DieGOs ([9585999](https://github.com/9585999))
- Jon Rohan ([jonrohan](https://github.com/jonrohan))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
# 10.6.1
#### :bug: Bug Fix
* [#506](https://github.com/primer/primer/pull/506) Fix white border on last avatar in AvatarStack (take two). ([@shawnbot](https://github.com/shawnbot))

18
RELEASING.md
View File

@ -3,20 +3,23 @@
### In `primer/primer`:
1. Create a new release branch from `dev` and name it `release-<version>`.
(CI will publish a release candidate version to npm for branches prefixed with `release`. These version numbers have a `rc.<number>` suffix on them)
1. Go through the tracking PR and make sure everything that should be merged in is merged in.
2. Go through the tracking issue and make sure everything that should be merged in is merged in.
2. To update the change log for your release, click on the details links for the continuous-integration/travis-ci/push build. Expand the `Deploying application` output and copy the change log content. Update the [CHANGELOG.md](https://github.com/primer/primer/blob/master/CHANGELOG.md) file with the change log content from the build.
3. Once your builds finish, click on the details links for the continuous-integration/travis-ci/push build. Expand the `Deploying application` output and you should be able to find an outputted change log here. Copy this and update the [CHANGELOG.md](https://github.com/primer/primer/blob/master/CHANGELOG.md) file.
3. Run the version bump in your terminal: `npm run bump`.
4. Run the version bump in your terminal: `npm run bump`.
4. Run `script/check-versions` to double check there are no version conflicts. You may need to update peer dependencies in `primer-popover` and `primer-marketing-buttons`.
5. Test your changes with the latest release candidate version in the appropriate places (styleguide, storybook, github/github).
6. Once the release PR is approved and you've done necessary testing, merge to `master`. This will trigger a publish to npm.
7. Create a new release branch for the next release from `master` and name it `release-<version>`.
(CI will publish a release candidate version to npm for branches prefixed with `release`. These version numbers have a `rc.<number>` suffix on them)
### In `github/github`:
@ -53,11 +56,6 @@
1. Edit [index.html](https://github.com/primer/primer.github.io/blob/master/index.html) to include the latest version.
#### Update Storybook
1. Pull the latest from master on primer/primer (after merging in release branch).
2. Run `npm run publish-storybook`.
#### Publish release tag

8
modules/primer-alerts/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.5.7",
"version": "1.5.9",
"name": "primer-alerts",
"description": "Flash messages, or alerts, inform users of successful or pending actions.",
"homepage": "http://primer.github.io/",
@ -28,10 +28,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"alerts",

8
modules/primer-avatars/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.5.4",
"version": "1.5.6",
"name": "primer-avatars",
"description": "Basic styles for user profile avatars.",
"homepage": "http://primer.github.io/",
@ -25,10 +25,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"avatars",

8
modules/primer-avatars/stories.js
View File

@ -64,10 +64,10 @@ storiesOf('Avatars', module)
))
.add('AvatarStack on blue background', () => (
<div className='border bg-blue-light p-4'>
<div className="AvatarStack flex-self-start ">
<div className="AvatarStack-body" aria-label="chesterbr">
<a className="avatar" aria-describedby="hovercard-aria-description">
<img height="20" width="20" alt="@github" src="https://avatars0.githubusercontent.com/github?s=60&amp;v=4" />
<div className='AvatarStack flex-self-start'>
<div className='AvatarStack-body' aria-label='chesterbr'>
<a className='avatar' aria-describedby='hovercard-aria-description'>
<img height='20' width='20' alt='@github' src='https://avatars0.githubusercontent.com/github?s=60&amp;v=4' />
</a>
</div>
</div>

2
modules/primer-base/lib/normalize.scss vendored
View File

@ -82,7 +82,7 @@ progress {
template, /* 1 */
[hidden] {
display: none;
display: none !important;
}
/* Links

8
modules/primer-base/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.7.2",
"version": "1.7.4",
"name": "primer-base",
"description": "CSS to reset the browsers default styles",
"homepage": "http://primer.github.io/",
@ -29,10 +29,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"primer",

8
modules/primer-blankslate/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.4.7",
"version": "1.4.9",
"name": "primer-blankslate",
"description": "Blankslates are for when there is a lack of content within a page or section.",
"homepage": "http://primer.github.io/",
@ -25,10 +25,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"primer",

8
modules/primer-box/package.json
View File

@ -1,5 +1,5 @@
{
"version": "2.5.7",
"version": "2.5.9",
"name": "primer-box",
"description": "A module for creating rounded-corner boxes with options for headers, lists, and footers.",
"homepage": "http://primer.github.io/",
@ -25,10 +25,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"primer",

8
modules/primer-branch-name/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.0.5",
"version": "1.0.7",
"name": "primer-branch-name",
"description": "A nice, consistent way to display branch names.",
"homepage": "http://primer.github.io/",
@ -26,10 +26,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint test-docs"
"test": "../../script/npm-run-all build lint test-docs",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"github",

8
modules/primer-breadcrumb/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.5.3",
"version": "1.5.5",
"name": "primer-breadcrumb",
"description": "Breadcrumb navigation for pages with parents / grandparents.",
"homepage": "http://primer.github.io/",
@ -26,10 +26,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint test-docs"
"test": "../../script/npm-run-all build lint test-docs",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"breadcrumb",

4
modules/primer-buttons/README.md
View File

@ -220,12 +220,12 @@ Have a hankering for a series of buttons that are attached to one another? Wrap
</div>
```
Add `.BtnGroup-form` to `<form>`s within `.BtnGroup`s for proper spacing and rounded corners.
Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, within `.BtnGroup`s for proper spacing and rounded corners.
```html
<div class="BtnGroup">
<button class="btn BtnGroup-item" type="button">Button</button>
<form class="BtnGroup-form">
<form class="BtnGroup-parent">
<button class="btn BtnGroup-item" type="button">Button in a form</button>
</form>
<button class="btn BtnGroup-item" type="button">Button</button>

5
modules/primer-buttons/lib/button-group.scss
View File

@ -2,6 +2,8 @@
//
// A button group is a series of buttons laid out next to each other, all part
// of one visual button, but separated by rules to be separate.
@warn ".BtnGroup-form will be deprecated in version 11. Use .BtnGroup-parent instead.";
.BtnGroup {
display: inline-block;
vertical-align: middle;
@ -38,12 +40,14 @@
border-right-width: 1px;
+ .BtnGroup-item,
+ .BtnGroup-parent .BtnGroup-item,
+ .BtnGroup-form .BtnGroup-item {
border-left-width: 0;
}
}
}
.BtnGroup-parent,
.BtnGroup-form {
float: left;
@ -72,6 +76,7 @@
}
+ .BtnGroup-item,
+ .BtnGroup-parent .BtnGroup-item,
+ .BtnGroup-form .BtnGroup-item {
border-left-width: 0;
}

8
modules/primer-buttons/package.json
View File

@ -1,5 +1,5 @@
{
"version": "2.5.5",
"version": "2.6.0",
"name": "primer-buttons",
"description": "A collection of buttons used for primary and secondary actions.",
"homepage": "http://primer.github.io/",
@ -25,10 +25,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"primer",

32
modules/primer-core/package.json
View File

@ -1,5 +1,5 @@
{
"version": "6.10.1",
"version": "6.10.3",
"name": "primer-core",
"description": "Primer's core modules",
"homepage": "http://primer.github.io/",
@ -24,21 +24,23 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"test": "npm run build",
"lint": "../../script/lint-scss"
"lint": "../../script/lint-scss",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-base": "1.7.2",
"primer-box": "2.5.7",
"primer-breadcrumb": "1.5.3",
"primer-buttons": "2.5.5",
"primer-forms": "2.1.2",
"primer-layout": "1.4.7",
"primer-navigation": "1.5.5",
"primer-pagination": "1.0.1",
"primer-support": "4.5.4",
"primer-table-object": "1.4.7",
"primer-tooltips": "1.5.5",
"primer-truncate": "1.4.7",
"primer-utilities": "4.11.1"
"primer-base": "1.7.4",
"primer-box": "2.5.9",
"primer-breadcrumb": "1.5.5",
"primer-buttons": "2.6.0",
"primer-forms": "2.1.4",
"primer-layout": "1.4.9",
"primer-navigation": "1.5.7",
"primer-pagination": "1.0.3",
"primer-support": "4.6.0",
"primer-table-object": "1.4.9",
"primer-tooltips": "1.5.7",
"primer-truncate": "1.4.9",
"primer-utilities": "4.12.0"
}
}

8
modules/primer-forms/package.json
View File

@ -1,5 +1,5 @@
{
"version": "2.1.2",
"version": "2.1.4",
"name": "primer-forms",
"description": "Style individual form controls and utilize common layouts.",
"homepage": "http://primer.github.io/",
@ -25,10 +25,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"primer",

8
modules/primer-labels/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.5.7",
"version": "1.5.9",
"name": "primer-labels",
"description": "Labels add metatdata or indicate status of items and navigational elements.",
"homepage": "http://primer.github.io/",
@ -25,10 +25,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"primer",

8
modules/primer-layout/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.4.7",
"version": "1.4.9",
"name": "primer-layout",
"description": "Containers, rows, and columns for creating page layout.",
"homepage": "http://primer.github.io/",
@ -26,10 +26,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"primer",

8
modules/primer-markdown/package.json
View File

@ -1,5 +1,5 @@
{
"version": "3.7.7",
"version": "3.7.9",
"name": "primer-markdown",
"description": "GitHub stylesheets for rendering markdown.",
"homepage": "https://github.com/primer/primer-markdown",
@ -25,10 +25,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"github",

10
modules/primer-marketing-buttons/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.0.6",
"version": "1.0.9",
"name": "primer-marketing-buttons",
"description": "Buttons for marketing websites at GitHub",
"homepage": "http://primer.github.io/",
@ -26,13 +26,15 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint test-docs"
"test": "../../script/npm-run-all build lint test-docs",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"peerDependencies": {
"primer-buttons": "2.5.5"
"primer-buttons": "2.6.0"
},
"keywords": [
"css",

6
modules/primer-marketing-support/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.5.2",
"version": "1.5.3",
"name": "primer-marketing-support",
"description": "Sass variables, mixins, and functions for use in our components.",
"homepage": "http://primer.github.io/",
@ -22,7 +22,9 @@
"scripts": {
"lint": "../../script/lint-scss",
"test": "npm run lint",
"build": "../../script/npm-run primer-module-build index.scss"
"build": "../../script/npm-run primer-module-build index.scss",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"keywords": [
"primer",

10
modules/primer-marketing-type/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.4.7",
"version": "1.4.9",
"name": "primer-marketing-type",
"description": "Typography for marketing websites at GitHub",
"homepage": "http://primer.github.io/",
@ -26,11 +26,13 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint test-docs"
"test": "../../script/npm-run-all build lint test-docs",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-marketing-support": "1.5.2",
"primer-support": "4.5.4"
"primer-marketing-support": "1.5.3",
"primer-support": "4.6.0"
},
"keywords": [
"css",

10
modules/primer-marketing-utilities/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.6.3",
"version": "1.6.5",
"name": "primer-marketing-utilities",
"description": "Marketing specific immutable, atomic CSS classes",
"homepage": "http://primer.github.io/",
@ -30,11 +30,13 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-marketing-support": "1.5.2",
"primer-support": "4.5.4"
"primer-marketing-support": "1.5.3",
"primer-support": "4.6.0"
},
"keywords": [
"primer",

22
modules/primer-marketing/package.json
View File

@ -1,5 +1,5 @@
{
"version": "6.2.2",
"version": "6.2.5",
"name": "primer-marketing",
"description": "Primer marketing packages",
"homepage": "http://primer.github.io/",
@ -24,16 +24,18 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"test": "npm run build",
"lint": "../../script/lint-scss"
"lint": "../../script/lint-scss",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-marketing-buttons": "1.0.6",
"primer-marketing-support": "1.5.2",
"primer-marketing-type": "1.4.7",
"primer-marketing-utilities": "1.6.3",
"primer-page-headers": "1.4.7",
"primer-page-sections": "1.4.7",
"primer-support": "4.5.4",
"primer-tables": "1.4.7"
"primer-marketing-buttons": "1.0.9",
"primer-marketing-support": "1.5.3",
"primer-marketing-type": "1.4.9",
"primer-marketing-utilities": "1.6.5",
"primer-page-headers": "1.4.9",
"primer-page-sections": "1.4.9",
"primer-support": "4.6.0",
"primer-tables": "1.4.9"
}
}

8
modules/primer-navigation/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.5.5",
"version": "1.5.7",
"name": "primer-navigation",
"description": "Singular purpose and flexible navigation elements.",
"homepage": "http://primer.github.io/",
@ -25,10 +25,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"primer",

10
modules/primer-page-headers/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.4.7",
"version": "1.4.9",
"name": "primer-page-headers",
"description": "Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.",
"homepage": "http://primer.github.io/",
@ -25,11 +25,13 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-marketing-support": "1.5.2",
"primer-support": "4.5.4"
"primer-marketing-support": "1.5.3",
"primer-support": "4.6.0"
},
"keywords": [
"css",

10
modules/primer-page-sections/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.4.7",
"version": "1.4.9",
"name": "primer-page-sections",
"description": "Styles to create distinct sections of marketing pages at GitHub.",
"homepage": "http://primer.github.io/",
@ -25,11 +25,13 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-marketing-support": "1.5.2",
"primer-support": "4.5.4"
"primer-marketing-support": "1.5.3",
"primer-support": "4.6.0"
},
"keywords": [
"css",

8
modules/primer-pagination/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.0.1",
"version": "1.0.3",
"name": "primer-pagination",
"description": "Pagination component for applying button styles to a connected set of links that go to related pages",
"homepage": "http://primer.github.io/",
@ -21,10 +21,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint test-docs"
"test": "../../script/npm-run-all build lint test-docs",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"github",

10
modules/primer-popover/package.json
View File

@ -1,5 +1,5 @@
{
"version": "0.1.1",
"version": "0.1.4",
"name": "primer-popover",
"description": "Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.",
"homepage": "http://primer.github.io/",
@ -21,13 +21,15 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint test-docs"
"test": "../../script/npm-run-all build lint test-docs",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"peerDependencies": {
"primer-box": "2.5.7"
"primer-box": "2.5.9"
},
"keywords": [
"github",

4
modules/primer-product/README.md
View File

@ -12,7 +12,7 @@ This repository is a compilation of [several CSS packages](https://github.com/pr
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer` with this command. **You must have npm >=3.0 installed to be able to satisfy the dependency paths**
```
$ npm install --save primer-core
$ npm install --save primer-product
```
## Usage
@ -20,7 +20,7 @@ $ npm install --save primer-core
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
```scss
@import "primer-core/index.scss";
@import "primer-product/index.scss";
```
You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._

24
modules/primer-product/package.json
View File

@ -1,5 +1,5 @@
{
"version": "5.6.4",
"version": "5.6.7",
"name": "primer-product",
"description": "Primer's product modules",
"homepage": "http://primer.github.io/",
@ -24,17 +24,19 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"test": "npm run build",
"lint": "../../script/lint-scss"
"lint": "../../script/lint-scss",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-alerts": "1.5.7",
"primer-avatars": "1.5.4",
"primer-blankslate": "1.4.7",
"primer-branch-name": "1.0.5",
"primer-labels": "1.5.7",
"primer-markdown": "3.7.7",
"primer-popover": "0.1.1",
"primer-subhead": "1.0.5",
"primer-support": "4.5.4"
"primer-alerts": "1.5.9",
"primer-avatars": "1.5.6",
"primer-blankslate": "1.4.9",
"primer-branch-name": "1.0.7",
"primer-labels": "1.5.9",
"primer-markdown": "3.7.9",
"primer-popover": "0.1.4",
"primer-subhead": "1.0.7",
"primer-support": "4.6.0"
}
}

8
modules/primer-subhead/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.0.5",
"version": "1.0.7",
"name": "primer-subhead",
"description": "The Subhead is a simple header with a bottom border. It&#39;s designed to be used on settings and configuration pages.",
"homepage": "http://primer.github.io/",
@ -21,10 +21,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint test-docs"
"test": "../../script/npm-run-all build lint test-docs",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"github",

392
modules/primer-support/docs/color-system.md
View File

@ -1,392 +0,0 @@
---
title: Color system
status_issue: https://github.com/github/design-systems/issues/301
status: New release
source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/variables/color-system.scss
---
{:toc}
## Color palette
<div class="markdown-no-margin mb-6 d-flex h5">
<div class="gray-500 d-flex color-square mr-2">
<p class="p-3 flex-self-end text-white">Gray</p>
</div>
<div class="blue-500 d-flex color-square mr-2">
<p class="p-3 flex-self-end text-white">Blue</p>
</div>
<div class="green-500 d-flex color-square mr-2">
<p class="p-3 flex-self-end text-white">Green</p>
</div>
<div class="purple-500 d-flex color-square mr-2">
<p class="p-3 flex-self-end text-white">Purple</p>
</div>
<div class="yellow-500 d-flex color-square mr-2">
<p class="p-3 flex-self-end">Yellow</p>
</div>
<div class="orange-500 d-flex color-square mr-2">
<p class="p-3 flex-self-end">Orange</p>
</div>
<div class="red-500 d-flex color-square mr-2">
<p class="p-3 flex-self-end text-white">Red</p>
</div>
<div class="bg-white d-flex color-square border border-gray-dark">
<p class="p-3 flex-self-end">White</p>
</div>
</div>
## Color variables
<div class="d-flex flex-wrap gutter">
<div class="mb-6 flex-column col-6 markdown-no-margin">
<h3>Gray</h3>
<div class="gray-500 my-2 p-3">
<p class="text-white f00-light pb-3">Gray</p>
<div class="d-flex text-white">
<p class="h4 flex-auto">$gray-500</p>
<p class="text-right text-mono flex-auto">#6a737d</p>
</div>
</div>
<div class="gray-000 h4">
<p class="p-3">$gray-000</p>
</div>
<div class="gray-100 h4">
<p class="p-3">$gray-100</p>
</div>
<div class="gray-200 h4">
<p class="p-3">$gray-200</p>
</div>
<div class="gray-300 h4">
<p class="p-3">$gray-300</p>
</div>
<div class="gray-400 h4">
<p class="p-3">$gray-400</p>
</div>
<div class="gray-500 h4">
<p class="p-3 text-white">$gray-500</p>
</div>
<div class="gray-600 h4">
<p class="p-3 text-white">$gray-600</p>
</div>
<div class="gray-700 h4">
<p class="p-3 text-white">$gray-700</p>
</div>
<div class="gray-800 h4">
<p class="p-3 text-white">$gray-800</p>
</div>
<div class="gray-900 h4">
<p class="p-3 text-white">$gray-900</p>
</div>
</div>
<div class="mb-6 flex-column col-6 markdown-no-margin">
<h3>Blue</h3>
<div class="blue-500 my-2 p-3">
<p class="text-white f00-light pb-3">Blue</p>
<div class="d-flex text-white">
<p class="h4 flex-auto">$blue-500</p>
<p class="text-right text-mono flex-auto">#0366d6</p>
</div>
</div>
<div class="blue-000 h4">
<p class="p-3">$blue-000</p>
</div>
<div class="blue-100 h4">
<p class="p-3">$blue-100</p>
</div>
<div class="blue-200 h4">
<p class="p-3">$blue-200</p>
</div>
<div class="blue-300 h4">
<p class="p-3">$blue-300</p>
</div>
<div class="blue-400 h4">
<p class="p-3">$blue-400</p>
</div>
<div class="blue-500 h4">
<p class="p-3 text-white">$blue-500</p>
</div>
<div class="blue-600 h4">
<p class="p-3 text-white">$blue-600</p>
</div>
<div class="blue-700 h4">
<p class="p-3 text-white">$blue-700</p>
</div>
<div class="blue-800 h4">
<p class="p-3 text-white">$blue-800</p>
</div>
<div class="blue-900 h4">
<p class="p-3 text-white">$blue-900</p>
</div>
</div>
<div class="mb-6 flex-column col-6 markdown-no-margin">
<h3>Green</h3>
<div class="green-500 my-2 p-3">
<p class="text-white f00-light pb-3">Green</p>
<div class="d-flex text-white">
<p class="h4 flex-auto">$green-500</p>
<p class="text-right text-mono flex-auto">#28a745</p>
</div>
</div>
<div class="green-000 h4">
<p class="p-3">$green-000</p>
</div>
<div class="green-100 h4">
<p class="p-3">$green-100</p>
</div>
<div class="green-200 h4">
<p class="p-3">$green-200</p>
</div>
<div class="green-300 h4">
<p class="p-3">$green-300</p>
</div>
<div class="green-400 h4">
<p class="p-3">$green-400</p>
</div>
<div class="green-500 h4">
<p class="p-3 text-white">$green-500</p>
</div>
<div class="green-600 h4">
<p class="p-3 text-white">$green-600</p>
</div>
<div class="green-700 h4">
<p class="p-3 text-white">$green-700</p>
</div>
<div class="green-800 h4">
<p class="p-3 text-white">$green-800</p>
</div>
<div class="green-900 h4">
<p class="p-3 text-white">$green-900</p>
</div>
</div>
<div class="mb-6 flex-column col-6 markdown-no-margin">
<h3>Purple</h3>
<div class="purple-500 text-white my-2 p-3">
<p class="f00-light pb-3">Purple</p>
<div class="d-flex">
<p class="h4 flex-auto">$purple-500</p>
<p class="text-right text-mono flex-auto">#6f42c1</p>
</div>
</div>
<div class="purple-000 h4">
<p class="p-3">$purple-000</p>
</div>
<div class="purple-100 h4">
<p class="p-3">$purple-100</p>
</div>
<div class="purple-200 h4">
<p class="p-3">$purple-200</p>
</div>
<div class="purple-300 h4">
<p class="p-3">$purple-300</p>
</div>
<div class="purple-400 h4">
<p class="p-3">$purple-400</p>
</div>
<div class="purple-500 h4">
<p class="p-3 text-white">$purple-500</p>
</div>
<div class="purple-600 h4">
<p class="p-3 text-white">$purple-600</p>
</div>
<div class="purple-700 h4">
<p class="p-3 text-white">$purple-700</p>
</div>
<div class="purple-800 h4">
<p class="p-3 text-white">$purple-800</p>
</div>
<div class="purple-900 h4">
<p class="p-3 text-white">$purple-900</p>
</div>
</div>
<div class="mb-6 flex-column col-6 markdown-no-margin">
<h3>Yellow</h3>
<div class="yellow-500 my-2 p-3">
<p class="f00-light pb-3">Yellow</p>
<div class="d-flex">
<p class="h4 flex-auto">$yellow-500</p>
<p class="text-right text-mono flex-auto">#ffd93d</p>
</div>
</div>
<div class="yellow-000 h4">
<p class="p-3">$yellow-000</p>
</div>
<div class="yellow-100 h4">
<p class="p-3">$yellow-100</p>
</div>
<div class="yellow-200 h4">
<p class="p-3">$yellow-200</p>
</div>
<div class="yellow-300 h4">
<p class="p-3">$yellow-300</p>
</div>
<div class="yellow-400 h4">
<p class="p-3">$yellow-400</p>
</div>
<div class="yellow-500 h4">
<p class="p-3">$yellow-500</p>
</div>
<div class="yellow-600 h4">
<p class="p-3">$yellow-600</p>
</div>
<div class="yellow-700 h4">
<p class="p-3">$yellow-700</p>
</div>
<div class="yellow-800 h4">
<p class="p-3 text-white">$yellow-800</p>
</div>
<div class="yellow-900 h4">
<p class="p-3 text-white">$yellow-900</p>
</div>
</div>
<div class="mb-6 flex-column col-6 markdown-no-margin">
<h3>Orange</h3>
<div class="orange-500 my-2 p-3 text-white">
<p class="f00-light pb-3">Orange</p>
<div class="d-flex">
<p class="h4 flex-auto">$orange-500</p>
<p class="text-right text-mono flex-auto">#f66a0a</p>
</div>
</div>
<div class="orange-000 h4">
<p class="p-3">$orange-000</p>
</div>
<div class="orange-100 h4">
<p class="p-3">$orange-100</p>
</div>
<div class="orange-200 h4">
<p class="p-3">$orange-200</p>
</div>
<div class="orange-300 h4">
<p class="p-3">$orange-300</p>
</div>
<div class="orange-400 h4">
<p class="p-3">$orange-400</p>
</div>
<div class="orange-500 h4">
<p class="p-3 text-white">$orange-500</p>
</div>
<div class="orange-600 h4">
<p class="p-3 text-white">$orange-600</p>
</div>
<div class="orange-700 h4">
<p class="p-3 text-white">$orange-700</p>
</div>
<div class="orange-800 h4">
<p class="p-3 text-white">$orange-800</p>
</div>
<div class="orange-900 h4">
<p class="p-3 text-white">$orange-900</p>
</div>
</div>
<div class="mb-6 flex-column col-6 markdown-no-margin">
<h3>Red</h3>
<div class="red-500 text-white my-2 p-3">
<p class="f00-light pb-3">Red</p>
<div class="d-flex">
<p class="h4 flex-auto">$red-500</p>
<p class="text-right text-mono flex-auto">#dc3545</p>
</div>
</div>
<div class="red-000 h4">
<p class="p-3">$red-000</p>
</div>
<div class="red-100 h4">
<p class="p-3">$red-100</p>
</div>
<div class="red-200 h4">
<p class="p-3">$red-200</p>
</div>
<div class="red-300 h4">
<p class="p-3">$red-300</p>
</div>
<div class="red-400 h4">
<p class="p-3">$red-400</p>
</div>
<div class="red-500 h4">
<p class="p-3 text-white">$red-500</p>
</div>
<div class="red-600 h4">
<p class="p-3 text-white">$red-600</p>
</div>
<div class="red-700 h4">
<p class="p-3 text-white">$red-700</p>
</div>
<div class="red-800 h4">
<p class="p-3 text-white">$red-800</p>
</div>
<div class="red-900 h4">
<p class="p-3 text-white">$red-900</p>
</div>
</div>
<div class="mb-6 flex-column col-6">
</div>
<!-- Gray and fades (headings inside the markup) -->
<div class="mb-3 flex-column col-6 markdown-no-margin">
<h3>Black fades</h3>
<div class="black text-white my-2 p-3">
<p class="f00-light pb-3">Black</p>
<div class="d-flex pb-1">
<p class="h4 flex-auto">$black</p>
<p class="text-right text-mono flex-auto"><code>rgb(27,31,35)</code> #1b1f23</p>
</div>
<p class="f5 pt-3 border-top border-white">Black fades apply alpha transparency to the <strong>$black</strong> variable. The black color value has a slight blue hue to match our grays.</p>
</div>
<div class="black-fade-15">
<p class="h4 p-3">$black-fade-15</p>
</div>
<div class="black-fade-30">
<p class="h4 p-3">$black-fade-30</p>
</div>
<div class="black-fade-50">
<p class="h4 p-3">$black-fade-50</p>
</div>
<div class="black-fade-70">
<p class="h4 p-3 text-white">$black-fade-70</p>
</div>
<div class="black-fade-85">
<p class="h4 p-3 text-white">$black-fade-85</p>
</div>
</div>
<div class="mb-3 flex-column col-6 markdown-no-margin">
<h3>White fades</h3>
<div class="bg-white border text-gray-dark my-2 p-3">
<p class="f00-light pb-3">White</p>
<div class="d-flex pb-1">
<p class="h4 flex-auto">$white</p>
<p class="text-right text-mono flex-auto"><code>rgb(255, 255, 255)</code> #fff</p>
</div>
<p class="f5 pt-3 border-top border-white">White fades apply alpha transparency to the <strong>$white</strong> variable, below these are shown overlaid on a dark gray background.</p>
</div>
<div class="bg-gray-dark pr-4">
<div class="white-fade-15">
<p class="h4 p-3 text-white">$white-fade-15</p>
</div>
<div class="white-fade-30">
<p class="h4 p-3 text-white">$white-fade-30</p>
</div>
<div class="white-fade-50">
<p class="h4 p-3">$white-fade-50</p>
</div>
<div class="white-fade-70">
<p class="h4 p-3">$white-fade-70</p>
</div>
<div class="white-fade-85">
<p class="h4 p-3">$white-fade-85</p>
</div>
</div>
</div>
</div>

3
modules/primer-support/lib/variables/layout.scss
View File

@ -22,6 +22,7 @@ $spacers: (
) !default;
// Aliases for easy use
$spacer-0: nth($spacers, 1) !default; // 0
$spacer-1: nth($spacers, 2) !default; // 4px
$spacer-2: nth($spacers, 3) !default; // 8px
$spacer-3: nth($spacers, 4) !default; // 16px
@ -59,7 +60,7 @@ $breakpoints: (
sm: $width-sm,
// Medium screen / tablet
md: $width-md,
// Large screen / desktop (980 + (12 * 2)) <= container + gutters
// Large screen / desktop (980 + (16 * 2)) <= container + gutters
lg: $width-lg,
// Extra large screen / wide desktop
xl: $width-xl

6
modules/primer-support/package.json
View File

@ -1,5 +1,5 @@
{
"version": "4.5.4",
"version": "4.6.0",
"name": "primer-support",
"description": "Sass variables, mixins, and functions for use in our components.",
"homepage": "http://primer.github.io/",
@ -23,7 +23,9 @@
"scripts": {
"lint": "../../script/lint-scss",
"test": "npm run lint",
"build": "../../script/npm-run primer-module-build index.scss"
"build": "../../script/npm-run primer-module-build index.scss",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"keywords": [
"primer",

8
modules/primer-table-object/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.4.7",
"version": "1.4.9",
"name": "primer-table-object",
"description": "A module for creating dynamically resizable elements that always sit on the same horizontal line.",
"homepage": "http://primer.github.io/",
@ -26,10 +26,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint test-docs"
"test": "../../script/npm-run-all build lint test-docs",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"primer",

10
modules/primer-tables/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.4.7",
"version": "1.4.9",
"name": "primer-tables",
"description": "Styles to display tabular data for marketing websites at GitHub.",
"homepage": "http://primer.github.io/",
@ -25,11 +25,13 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-marketing-support": "1.5.2",
"primer-support": "4.5.4"
"primer-marketing-support": "1.5.3",
"primer-support": "4.6.0"
},
"keywords": [
"css",

8
modules/primer-tooltips/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.5.5",
"version": "1.5.7",
"name": "primer-tooltips",
"description": "Add tooltips built entirely in CSS to nearly any element.",
"homepage": "http://primer.github.io/",
@ -26,10 +26,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint test-docs"
"test": "../../script/npm-run-all build lint test-docs",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"primer",

8
modules/primer-truncate/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.4.7",
"version": "1.4.9",
"name": "primer-truncate",
"description": "Shorten text with an ellipsis.",
"homepage": "http://primer.github.io/",
@ -26,10 +26,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint test-docs"
"test": "../../script/npm-run-all build lint test-docs",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"primer",

242
modules/primer-utilities/docs/colors.md
View File

@ -1,242 +0,0 @@
---
title: Colors
status: New release
status_issue: https://github.com/github/design-systems/issues/97
---
Use color utilities to apply color to the background of elements, text, and borders.
* [Background colors](#background-colors)
* [Text colors](#text-colors)
* [Link colors](#link-colors)
* [Border colors](#border-colors)
## Background colors
Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can [check your color combination with this demo site](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](/primer/principles/accessibility).
### Gray
<div class="container-lg clearfix mb-4">
<div class="col-3 float-left pr-4">
<div class="h4">.bg-gray</div>
<code>#f5f5f5, $bg-gray</code>
<div class="mt-2 bg-gray" style="height: 60px;"></div>
</div>
<div class="col-9 float-left">
<div class="container-lg clearfix">
<div class="col-6 float-left">
<div class="h4">.bg-gray-dark</div>
<code>#333, $bg-gray-dark</code>
<div class="mt-2 bg-gray-dark border-right-0" style="height: 60px;"></div>
</div>
<div class="col-6 float-left">
<div class="h4">.bg-gray-light</div>
<code>#fafafa, $bg-gray-light</code>
<div class="mt-2 bg-gray-light" style="height: 60px;"></div>
</div>
</div>
</div>
</div>
### Blue
<div class="container-lg clearfix mb-4">
<div class="col-3 float-left pr-4">
<div class="h4">.bg-blue</div>
<code>#4078c0, $bg-blue</code>
<div class="mt-2 bg-blue" style="height: 60px;"></div>
</div>
<div class="col-9 float-left">
<div class="container-lg clearfix">
<div class="h4">.bg-blue-light</div>
<code>#f2f8fa, $bg-blue-light</code>
<div class="mt-2 bg-blue-light" style="height: 60px;"></div>
</div>
</div>
</div>
### Yellow
<div class="container-lg clearfix mb-4">
<div class="col-3 float-left pr-4">
<div class="h4">.bg-yellow</div>
<code>#ffd36b, $bg-yellow</code>
<div class="mt-2 bg-yellow" style="height: 60px;"></div>
</div>
<div class="col-9 float-left">
<div class="container-lg clearfix">
<div class="h4">.bg-yellow-light</div>
<code>#fff9ea, $bg-yellow-light</code>
<div class="mt-2 bg-yellow-light" style="height: 60px;"></div>
</div>
</div>
</div>
### Red
<div class="container-lg clearfix mb-4">
<div class="col-3 float-left pr-4">
<div class="h4">.bg-red</div>
<code>#bd2c00, $bg-red</code>
<div class="mt-2 bg-red" style="height: 60px;"></div>
</div>
<div class="col-9 float-left">
<div class="container-lg clearfix">
<div class="h4">.bg-red-light</div>
<code>#fcdede, $bg-red-light</code>
<div class="mt-2 bg-red-light" style="height: 60px;"></div>
</div>
</div>
</div>
### Green
<div class="container-lg clearfix mb-4">
<div class="col-3 float-left pr-4">
<div class="h4">.bg-green</div>
<code>#6cc644, $bg-green</code>
<div class="mt-2 bg-green" style="height: 60px;"></div>
</div>
<div class="col-9 float-left">
<div class="container-lg clearfix">
<div class="h4">.bg-green-light</div>
<code>#eaffea, $bg-green-light</code>
<div class="mt-2 bg-green-light" style="height: 60px;"></div>
</div>
</div>
</div>
### Purple
<div class="container-lg clearfix mb-4">
<div class="col-3 float-left pr-4">
<div class="h4">.bg-purple</div>
<code>#6e5494, $bg-purple</code>
<div class="mt-2 bg-purple" style="height: 60px;"></div>
</div>
<div class="col-9 float-left">
<div class="container-lg clearfix">
<div class="h4">.bg-purple-light</div>
<code>#f5f0ff, $bg-purple-light</code>
<div class="mt-2 bg-purple-light" style="height: 60px;"></div>
</div>
</div>
</div>
## Text colors
Use text color utilities to set text or [octicons](/styleguide/css/styles/core/components/octicons) to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](/primer/principles/accessibility).
These are our most common text with background color combinations. They don't all pass accessibility standards currently, but will be updated in the future. **Any of the combinations with a warning icon must be used with caution**.
### Text color inheritance
You can set the color inheritance on an element by using the `text-inherit` class.
```html
<div class="text-purple">
This text is purple, <a href="#" class="text-inherit">including the link</a>
</div>
```
### Text on white background
```html
<div class="text-blue mb-2">
.text-blue on white
</div>
<div class="text-gray-dark mb-2">
.text-gray-dark on white
</div>
<div class="text-gray mb-2">
.text-gray on white
</div>
<div class="text-red mb-2">
.text-red on white
</div>
<div class="text-orange mb-2">
.text-orange on white
</div>
<span class="float-left text-red tooltipped tooltipped-n" aria-label="Does not meet accessibility standards"><%= octicon("alert") %></span>
<div class="text-orange-light mb-2">
.text-orange-light on white
</div>
<span class="float-left text-red tooltipped tooltipped-n" aria-label="Does not meet accessibility standards"><%= octicon("alert") %></span>
<div class="text-green mb-2 ml-4">
.text-green on white
</div>
<div class="text-purple mb-2">
.text-purple on white
</div>
```
### Text on colored backgrounds
```html
<div class="text-white bg-blue mb-2">
.text-white on .bg-blue
</div>
<div class="bg-blue-light mb-2">
.text-gray-dark on .bg-blue-light
</div>
<div class="text-white bg-red mb-2">
.text-white on .bg-red
</div>
<div class="text-red bg-red-light mb-2">
.text-red on .bg-red-light
</div>
<div class="bg-green-light mb-2">
.text-gray-dark on .bg-green-light
</div>
<div class="bg-yellow mb-2">
.text-gray-dark on .bg-yellow
</div>
<div class="bg-yellow-light mb-2">
.text-gray-dark on .bg-yellow-light
</div>
<div class="text-white bg-purple mb-2">
.text-white on .bg-purple
</div>
<div class="text-white bg-gray-dark mb-2">
.text-white on .bg-gray-dark
</div>
<div class="bg-gray">
.text-gray-dark on .bg-gray
</div>
```
## Link colors
Base link styles turn links blue and apply an underline on hover. You can override the base link styles with text color utilities and the following link utilities. **Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.**
Use `link-gray` to turn the link color to `$text-gray` and remain hover on blue.
```html
<a class="link-gray" href="#url">link-gray</a>
```
Use `link-gray-dark` to turn the link color to `$text-gray-dark` and remain hover on blue.
```html
<a class="link-gray-dark" href="#url">link-gray-dark</a>
```
Use `.muted-link` to turn the link light gray in color, and blue on hover or focus with no underline.
```html
<a class="muted-link" href="#url">muted-link</a>
```
Use `link-hover-blue` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover.
```html
<a class="text-gray-dark no-underline" href="#url">
A link with only part of it is <span class="link-hover-blue">blue on hover</span>.
</a>
```
## Border colors
Border colors are documented on the [border utilities page](../..//utilities/borders#border-width-style-and-color-utilities).

4
modules/primer-utilities/docs/typography.md
View File

@ -78,6 +78,8 @@ Change the line height density with these utilities.
</p>
```
The `lh-0` utility class sets `line-height: 0 !important`, and can be used to remove vertical spacing from elements that inherit line-height but don't contain any text.
## Typographic styles
Change the font weight, styles, and alignment with these utilities.
@ -89,11 +91,13 @@ Change the font weight, styles, and alignment with these utilities.
<p class="no-wrap">No wrap</p>
<p class="ws-normal">Normal whitespace</p>
<p class="wb-break-all">Line break long lines</p>
<p class="text-underline">Text underline</p>
<p class="no-underline">No underline</p>
<p class="text-emphasized">Emphasized</p>
<p class="text-small">Small</p>
<p class="lead">Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
<p class="text-mono">Monospace</p>
<p class="user-select-none">User Select None</p>
```
## Text alignment

9
modules/primer-utilities/lib/typography.scss
View File

@ -160,6 +160,8 @@
.lh-condensed { line-height: $lh-condensed !important; }
/* Set the line height to default */
.lh-default { line-height: $lh-default !important; }
/* Set the line height to zero */
.lh-0 { line-height: 0 !important; }
// Text alignments
/* Text align to the right */
@ -189,6 +191,8 @@
/* Make text uppercase */
.text-uppercase { text-transform: uppercase !important; }
/* Underline text */
.text-underline { text-decoration: underline !important; }
/* Don't underline text */
.no-underline { text-decoration: none !important; }
/* Don't wrap white space */
.no-wrap { white-space: nowrap !important; }
@ -219,3 +223,8 @@
.text-mono {
font-family: $mono-font;
}
/* Disallow user from selecting text */
.user-select-none {
user-select: none !important;
}

8
modules/primer-utilities/package.json
View File

@ -1,5 +1,5 @@
{
"version": "4.11.1",
"version": "4.12.0",
"name": "primer-utilities",
"description": "Immutable, atomic CSS classes to rapidly build product",
"homepage": "http://primer.github.io/",
@ -26,10 +26,12 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "4.5.4"
"primer-support": "4.6.0"
},
"keywords": [
"primer",

2
modules/primer-utilities/stories/Typography.js
View File

@ -53,11 +53,13 @@ storiesOf('Typography utilities', module)
<p className='no-wrap'>no-wrap</p>
<p className='ws-normal'>ws-normal</p>
<p className='wb-break-all'>wb-break-all</p>
<p className='text-underline'>text-underline</p>
<p className='no-underline'>no-underline</p>
<p className='text-emphasized'>text-emphasized</p>
<p className='text-small'>text-small</p>
<p className='lead'>lead</p>
<p className='text-mono'>text-mono</p>
<p className='user-select-none'>user-select-none</p>
</div>
))
.add('text alignment', () => (

68
modules/primer/package.json
View File

@ -1,5 +1,5 @@
{
"version": "10.6.1",
"version": "10.8.1",
"name": "primer",
"description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
"homepage": "http://primer.github.io/",
@ -25,40 +25,42 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint"
"test": "../../script/npm-run-all build lint",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-alerts": "1.5.7",
"primer-avatars": "1.5.4",
"primer-base": "1.7.2",
"primer-blankslate": "1.4.7",
"primer-box": "2.5.7",
"primer-branch-name": "1.0.5",
"primer-breadcrumb": "1.5.3",
"primer-buttons": "2.5.5",
"primer-core": "6.10.1",
"primer-forms": "2.1.2",
"primer-labels": "1.5.7",
"primer-layout": "1.4.7",
"primer-markdown": "3.7.7",
"primer-marketing": "6.2.2",
"primer-marketing-buttons": "1.0.6",
"primer-marketing-support": "1.5.2",
"primer-marketing-type": "1.4.7",
"primer-marketing-utilities": "1.6.3",
"primer-navigation": "1.5.5",
"primer-page-headers": "1.4.7",
"primer-page-sections": "1.4.7",
"primer-pagination": "1.0.1",
"primer-popover": "0.1.1",
"primer-product": "5.6.4",
"primer-subhead": "1.0.5",
"primer-support": "4.5.4",
"primer-table-object": "1.4.7",
"primer-tables": "1.4.7",
"primer-tooltips": "1.5.5",
"primer-truncate": "1.4.7",
"primer-utilities": "4.11.1"
"primer-alerts": "1.5.9",
"primer-avatars": "1.5.6",
"primer-base": "1.7.4",
"primer-blankslate": "1.4.9",
"primer-box": "2.5.9",
"primer-branch-name": "1.0.7",
"primer-breadcrumb": "1.5.5",
"primer-buttons": "2.6.0",
"primer-core": "6.10.3",
"primer-forms": "2.1.4",
"primer-labels": "1.5.9",
"primer-layout": "1.4.9",
"primer-markdown": "3.7.9",
"primer-marketing": "6.2.5",
"primer-marketing-buttons": "1.0.9",
"primer-marketing-support": "1.5.3",
"primer-marketing-type": "1.4.9",
"primer-marketing-utilities": "1.6.5",
"primer-navigation": "1.5.7",
"primer-page-headers": "1.4.9",
"primer-page-sections": "1.4.9",
"primer-pagination": "1.0.3",
"primer-popover": "0.1.4",
"primer-product": "5.6.7",
"primer-subhead": "1.0.7",
"primer-support": "4.6.0",
"primer-table-object": "1.4.9",
"primer-tables": "1.4.9",
"primer-tooltips": "1.5.7",
"primer-truncate": "1.4.9",
"primer-utilities": "4.12.0"
},
"keywords": [
"primer",

20150
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -20,9 +20,9 @@
"test": "npm run test-all-modules && lerna run test",
"test-all-modules": "ava --verbose tests/test-*.js"
},
"devDependencies": {
"dependencies": {
"primer-module-build": "file:tools/primer-module-build",
"stylelint-config-primer": "^2.2.6",
"stylelint-config-primer": "file:tools/stylelint-config-primer",
"@storybook/addon-options": "3.4.3",
"@storybook/addons": "3.4.3",
"@storybook/react": "3.4.3",
@ -40,7 +40,7 @@
"globby": "^6.1.0",
"html-to-react": "^1.2.11",
"isomorphic-fetch": "^2.2.1",
"lerna": "2.4.0",
"lerna": "2.11.0",
"lerna-changelog": "^0.7.0",
"minimatch": "^3.0.4",
"node-sass": "^4.9.0",

2
script/after_success
View File

@ -4,7 +4,7 @@ set -e
branch=$TRAVIS_PULL_REQUEST_BRANCH
event=$TRAVIS_EVENT_TYPE
# only publish canary releases on PRs against dev
# only publish canary releases on non release or master branches
if [[ "$event" = "pull_request" ]] && [[ !("$branch" =~ ^release-.*) ]] && [[ !("$branch" = "master") ]];
then
script/release-pr --yes

30
script/notify
View File

@ -2,28 +2,13 @@
set -e
if [[ "$CI" != "true" ]]; then
echo "(notify bailing: not in CI)"
echo "(bailing: not in CI)"
exit
elif [[ $# -lt 1 ]]; then
echo "No status provided!" >&2
exit 1
fi
# the commit status context
context="npm publish"
_status=$1
# get the published version of primer from its package.json
package=primer
version=$(jq -r .version modules/$package/package.json)
published="$package@$version"
message=""
if [[ "$_status" = "success" ]]; then
# TODO point this at the contributing docs!
message="https://unpkg.com/$published/build/build.css"
fi
# XXX this will go away if we build pushes instead of PRs
if [[ "$TRAVIS_PULL_REQUEST_SHA" != "" ]]; then
# setting TRAVIS_COMMIT inline here is a fix for:
@ -31,5 +16,14 @@ if [[ "$TRAVIS_PULL_REQUEST_SHA" != "" ]]; then
export TRAVIS_COMMIT=$TRAVIS_PULL_REQUEST_SHA
fi
echo "📡 Transmitting publish status for $published..."
commit-status "$_status" "$context" "$published" "$message"
_status=$1
version=$(jq -r .version package.json)
name=$(jq -r .name package.json)
# the commit status context
context="npm publish $name"
message="https://unpkg.com/$name@$version/"
echo "📡 Transmitting publish status for $context $name@$version..."
commit-status "$_status" "$context" "$name@$version" "$message"

23
script/publish-storybook Executable file
View File

@ -0,0 +1,23 @@
#!/usr/bin/env node
const ghpages = require('gh-pages')
if (!process.env.GH_TOKEN) {
console.error('Publish storybook: No GH_TOKEN found for storybook publishing.')
process.exitCode = 1
return
}
ghpages.publish('build',{
branch: 'gh-pages',
repo: `https://primer-css:${process.env.GH_TOKEN}@github.com/primer/storybook.git`,
user: {
name: 'Primer CSS',
email: 'design-systems@github.com'
}
}, (error) => {
if(error) {
console.error('gh-pages failed to publish:', error.message.replace(process.env.GH_TOKEN, ''))
process.exitCode = 1
}
})

8
script/release
View File

@ -2,14 +2,14 @@
set -e
echo "📦 Publishing latest release..."
$(dirname $0)/notify pending
# note: try-publish should exit cleanly if it detects a duplicate
# published version
$(npm bin)/lerna exec -- $(pwd)/script/try-publish
# Build and publish storybook
$(npm bin)/build-storybook -o build
script/publish-storybook
echo "📓 Updated CHANGELOG..."
$(npm bin)/lerna-changelog
$(dirname $0)/notify success

10
script/release-candidate
View File

@ -39,13 +39,6 @@ const getUpdated = (args) => {
.then(updated => updated.map(pkg => pkg.name))
}
const notify = status => {
return execa('script/notify', [status], {env: process.env})
.catch(error => {
console.error('notify error:', error)
})
}
const writePackage = (pkg) => {
const {dir} = pkg
delete pkg.dir
@ -152,12 +145,11 @@ revertPackages()
console.error('lerna-changelog error:', error)
})
})
.then(() => notify('success'))
})
})
.catch(error => {
console.error('Error:', error)
process.exitCode = 1
return notify('error')
return
})
.then(() => process.exit())

6
script/release-pr
View File

@ -2,14 +2,8 @@
set -e
echo "🐦 Publishing PR (canary) release..."
# don't notify of a pending publish event because the version will differ from
# what lerna creates as a canary release
# $(dirname $0)/notify pending
$(npm bin)/lerna publish --npm-tag=pr --canary --exact $@
echo "📓 Updated CHANGELOG..."
$(npm bin)/lerna-changelog
$(dirname $0)/notify success

3
tools/generator-primer-module/README.md
View File

@ -73,8 +73,7 @@ live outside of the Primer monorepo, with the following caveats:
* When prompted to add the new module to existing meta-packages, you will need
to un-select them all.
* You will also need to manually install all of the monorepo's top-level dev
dependencies to get tools like `primer-module-build` and `ava`.
* You will also need to manually install all of the monorepo's top-level devDependencies to get tools like `primer-module-build` and `ava`.
* The `npm test` command will not work, because it references a test spec in
the monorepo.

4
tools/generator-primer-module/app/templates/package.json
View File

@ -26,7 +26,9 @@
"build": "../../script/npm-run primer-module-build index.scss",
"prepare": "npm run build",
"lint": "../../script/lint-scss",
"test": "../../script/npm-run-all build lint test-docs"
"test": "../../script/npm-run-all build lint test-docs",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"dependencies": {
"primer-support": "<%= dependencies['primer-support'].version %>"

4
tools/generator-primer-module/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.0.6",
"version": "1.0.8",
"name": "generator-primer-module",
"description": "Use this to create a new Primer modules!",
"author": "GitHub, Inc.",
@ -17,7 +17,7 @@
},
"dependencies": {
"chalk": "^2.1.0",
"primer-support": "4.5.4",
"primer-support": "4.6.0",
"yeoman-generator": "^1.1.1"
},
"keywords": [

8
tools/primer-module-build/package.json
View File

@ -1,5 +1,5 @@
{
"version": "1.0.3",
"version": "1.0.5",
"name": "primer-module-build",
"description": "Scripts to build primer SCSS modules into CSS and stats",
"homepage": "http://primercss.io/",
@ -24,7 +24,9 @@
"scripts": {
"ava": "../../script/npm-run ava --verbose \"tests/**/*.js\"",
"lint": "../../script/npm-run eslint lib/**/*.js *.js tests/**/*.js",
"test": "../../script/npm-run-all lint ava"
"test": "../../script/npm-run-all lint ava",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"keywords": [
"primer",
@ -43,7 +45,7 @@
"postcss": "^5.2.5"
},
"devDependencies": {
"primer-utilities": "4.11.1",
"primer-utilities": "4.12.0",
"tempy": "^0.2.1"
}
}

8
tools/stylelint-config-primer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "stylelint-config-primer",
"version": "2.2.8",
"version": "2.2.10",
"description": "Sharable stylelint config used by GitHub's CSS",
"homepage": "http://primer.github.io/",
"author": "GitHub, Inc.",
@ -12,14 +12,16 @@
"scripts": {
"ava": "ava --verbose \"tests/**/*.js\"",
"lint": "eslint **/*.js",
"test": "../../script/npm-run-all lint ava"
"test": "../../script/npm-run-all lint ava",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"repository": "https://github.com/primer/primer/tree/master/tools/stylelint-config-primer",
"dependencies": {
"stylelint-no-unsupported-browser-features": "^1.0.0",
"stylelint-order": "^0.4.4",
"stylelint-scss": "^1.4.1",
"stylelint-selector-no-utility": "1.8.8"
"stylelint-selector-no-utility": "1.8.10"
},
"devDependencies": {
"eslint": "^3.19.0",

8
tools/stylelint-selector-no-utility/package.json
View File

@ -1,12 +1,14 @@
{
"name": "stylelint-selector-no-utility",
"version": "1.8.8",
"version": "1.8.10",
"description": "Stylelint rule that doesn't allow the styling of utility classes in CSS",
"main": "index.js",
"scripts": {
"lint": "eslint .",
"tape": "node test/index.js",
"test": "../../script/npm-run-all lint tape"
"test": "../../script/npm-run-all lint tape",
"prepublishOnly": "../../script/notify pending",
"publish": "../../script/notify success"
},
"keywords": [
"stylelint-rule",
@ -21,7 +23,7 @@
"license": "MIT",
"repository": "https://github.com/primer/primer/tree/master/tools/stylelint-selector-no-utility",
"dependencies": {
"primer-utilities": "4.11.1",
"primer-utilities": "4.12.0",
"stylelint": "^7.13.0"
},
"devDependencies": {