mirror of
https://github.com/primer/css.git
synced 2024-09-20 05:07:11 +03:00
Merge branch 'release-10.7.0' into multi_status
This commit is contained in:
Jon Rohan
commit
d5e8c573a8
125
.github/CONTRIBUTING.md
vendored
125
.github/CONTRIBUTING.md
vendored
@ -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/)
|
||||
|
||||
4
.github/pull_request_template.md
vendored
4
.github/pull_request_template.md
vendored
@ -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)
|
||||
|
||||
|
||||
@ -22,9 +22,9 @@
|
||||
|
||||
1. Create a new branch
|
||||
|
||||
2. Update the primer version in your terminal `npm install primer@<version>`.
|
||||
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 `npm install stylelint-config-primer@latest`.
|
||||
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.
|
||||
|
||||
|
||||
@ -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&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&v=4' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"primer-support": "4.5.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"primer-buttons": ">=2.5.0"
|
||||
"primer-buttons": "2.5.5"
|
||||
},
|
||||
"keywords": [
|
||||
"css",
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
"primer-support": "4.5.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"primer-box": ">=2.5.0"
|
||||
"primer-box": "2.5.7"
|
||||
},
|
||||
"keywords": [
|
||||
"github",
|
||||
|
||||
@ -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._
|
||||
|
||||
@ -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>
|
||||
@ -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).
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "10.6.1",
|
||||
"version": "10.7.0",
|
||||
"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/",
|
||||
|
||||
26042
package-lock.json
generated
Normal file
26042
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -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
|
||||
|
||||
@ -6,6 +6,10 @@ echo "📦 Publishing latest release..."
|
||||
# published version
|
||||
$(npm bin)/lerna exec -- $(pwd)/script/try-publish
|
||||
|
||||
# Build and publish storybook
|
||||
$(npm bin)/build-storybook -o build
|
||||
$(npm bin)/gh-pages -d build -b gh-pages --silent -r https://primer-css:${GH_TOKEN}@github.com/primer/storybook
|
||||
|
||||
echo "📓 Updated CHANGELOG..."
|
||||
|
||||
$(npm bin)/lerna-changelog
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user