mirror of
https://github.com/primer/css.git
synced 2024-12-29 09:06:07 +03:00
Merge branch 'release-12.3.0' into fix-toc
This commit is contained in:
Shawn Allen
GitHub
commit
e43fa20f10
16
.github/CONTRIBUTING.md
vendored
16
.github/CONTRIBUTING.md
vendored
@ -50,17 +50,17 @@ Good pull requests—patches, improvements, new features—are a fantastic help.
|
||||
|
||||
**Please ask first** before embarking on any significant pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project.
|
||||
|
||||
### Updating Primer modules
|
||||
### Updating Primer CSS modules
|
||||
|
||||
Anyone can open a pull request on Primer. You do not need to work at GitHub or be a member of the org to open a pull request.
|
||||
Anyone can open a pull request on Primer CSS. You do not need to work at GitHub or be a member of the org to open a pull request.
|
||||
|
||||
1. Fork and clone [this repository](https://github.com/primer/primer).
|
||||
1. Fork and clone [this repository](https://github.com/primer/css).
|
||||
2. Configure and install the dependencies: `npm install`
|
||||
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. 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 pass, you should see a status check telling you which alpha version of `@primer/css` you can install with npm to test your work in other projects.
|
||||
- If the tests fail, review the logs and address any issues.
|
||||
- If the builds fail for any other reason (as they occasionally do), they may need to be manually restarted.
|
||||
7. When CI tests pass, a new npm alpha release will be posted under the CI checks, you can use this npm version for testing in your project or with a GitHub site if you are staff.
|
||||
@ -71,7 +71,7 @@ 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
|
||||
## Releasing a new Primer CSS version
|
||||
See [RELEASING.md](../RELEASING.md) for our release process.
|
||||
|
||||
## Resources
|
||||
@ -80,6 +80,6 @@ See [RELEASING.md](../RELEASING.md) for our release process.
|
||||
- [Using Pull Requests](https://help.github.com/articles/using-pull-requests/)
|
||||
- [GitHub Help](https://help.github.com)
|
||||
|
||||
[fork]: https://github.com/primer/primer/fork
|
||||
[pr]: https://github.com/primer/primer/compare
|
||||
[style]: https://styleguide.github.com/primer/principles/
|
||||
[fork]: https://github.com/primer/css/fork
|
||||
[pr]: https://github.com/primer/css/compare
|
||||
[style]: https://primer.style/css/principles
|
||||
|
||||
4
.github/ISSUE_TEMPLATE/primer-bug-report.md
vendored
4
.github/ISSUE_TEMPLATE/primer-bug-report.md
vendored
@ -1,6 +1,6 @@
|
||||
---
|
||||
name: Primer bug report
|
||||
about: Create a report to help us improve primer
|
||||
name: Primer CSS bug report
|
||||
about: Create a report to help us improve Primer CSS
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
name: Primer feature request
|
||||
name: Primer CSS feature request
|
||||
about: Suggest an idea for this project
|
||||
|
||||
---
|
||||
|
||||
17
DEVELOP.md
17
DEVELOP.md
@ -1,4 +1,4 @@
|
||||
# Primer Development
|
||||
# Primer CSS Development
|
||||
|
||||
If you've made it this far, **thank you**! We appreciate your contribution, and hope that this document helps you along the way. If you have any questions or problems, don't hesitate to [file an issue](https://github.com/primer/css/issues/new).
|
||||
|
||||
@ -60,23 +60,13 @@ If, for whatever reason, the dev server isn't syncing files from `src/` to `page
|
||||
script/sync
|
||||
```
|
||||
|
||||
**If you find yourself needing to do this often, please [file an issue](/primer/primer/issues/new) and tag `@shawnbot`**. :bow:
|
||||
**If you find yourself needing to do this often, please [file an issue](/primer/css/issues/new) and tag `@shawnbot`**. :bow:
|
||||
|
||||
### The pages directory
|
||||
The [pages directory](./pages/) contains all of the files that map to URLs on the site. Because we plan to host the site at `primer.style/css` (and because of the way that Now's path aliasing feature works), we nest all of our documentation under the [css subdirectory](./pages/css).
|
||||
The [pages directory](./pages/) contains all of the files that map to URLs on the site. Because we host the site at `primer.style/css` (and because of the way that Now's path aliasing feature works), we nest all of our documentation under the [css subdirectory](./pages/css).
|
||||
|
||||
The sync task maintains a list of files copied from `src/` in `pages/css/.gitignore`, which ensures that none of these generated files are checked into git.
|
||||
|
||||
### Sync internals
|
||||
We use [Metalsmith] to sync the source docs to the `pages` directory and transform them in the following ways:
|
||||
|
||||
1. We filter the list of files to only Markdown documents (`**/*.md`).
|
||||
1. Many bundle `README.md`s wrap the actual documentation content in `<!-- %docs -->` HTML comments that usually include YAML frontmatter. In these instances, we extract the content that portion and reformat the frontmatter.
|
||||
1. We filter out any Markdown files that _don't_ include a `path` frontmatter key, and rename the destination file to match the `path` (e.g. `path: foo/bar` writes to `pages/css/foo/bar.md`).
|
||||
1. We set the `source` frontmatter key to a fully-qualified `github.com` URL for the source file so that we can link directly to it.
|
||||
1. We read the list of files from `pages/css/.gitignore` and delete them from the filesystem, then write the new list of paths so that they aren't committed to git.
|
||||
|
||||
All of the logic for syncing the source docs (and transforming them in transit) is controlled in [`lib/sync.js`](./lib/sync.js), and each "step" in the transformation (as well as the watching) is implemented as a Metalsmith plugin.
|
||||
|
||||
### URL tests
|
||||
We have a script that catches inadvertent URL changes caused by renaming or deleting Markdown docs:
|
||||
@ -124,7 +114,6 @@ npm run
|
||||
|
||||
|
||||
[@primer/css]: https://www.npmjs.com/package/@primer/css
|
||||
[metalsmith]: https://metalsmith.io/
|
||||
[run-scripts]: https://docs.npmjs.com/cli/run-script
|
||||
[storybook]: https://storybook.js.org/
|
||||
[npm]: https://www.npmjs.com/
|
||||
|
||||
66
RELEASING.md
66
RELEASING.md
@ -1,18 +1,18 @@
|
||||
# Releasing a new version of Primer CSS 🎉
|
||||
|
||||
## Prepare the release (in `primer/css`)
|
||||
|
||||
## In this repo
|
||||
1. Decide which [PRs](https://github.com/primer/css/pulls) should be part of the next release and if it will be a major, minor or patch `<version>`. You may also check the [release tracking project
|
||||
](https://github.com/primer/css/projects/2#column-4482699) or ask your team members in Slack.
|
||||
|
||||
1. Check off all of the boxes in your release PR.
|
||||
1. Create a new release branch from `master` and name it `release-<version>`.
|
||||
|
||||
1. Test your changes with the latest release candidate version [in github/github](#in-github-github).
|
||||
1. Start merging existing PRs into the release branch. Note: You have to change the base branch from `master` to the `release-<version>` branch before merging.
|
||||
|
||||
1. Once the release PR is approved and you've done necessary testing, merge it. After tests run, the site will be deployed and `@primer/css` will be published with your changes.
|
||||
|
||||
1. Create a new release branch for the next release from `master` and name it `release-<version>`. Please use the following template for the PR description, linking to the relevant issues and/or pull requests for each change, and removing irrelevant headings:
|
||||
1. Create a new PR for the `release-<version>` branch. Please use the following template for the PR description, linking to the relevant issues and/or pull requests for each change, removing irrelevant headings and checking off all of the boxes of the ship checklist:
|
||||
|
||||
```md
|
||||
# Primer [Major|Minor|Patch] Release
|
||||
# Primer CSS [Major|Minor|Patch] Release
|
||||
|
||||
Version: 📦 **0.0.0**
|
||||
Approximate release date: 📆 DD/MM/YY
|
||||
@ -25,13 +25,13 @@
|
||||
|
||||
### :bug: Bug Fix
|
||||
- [ ] Description #
|
||||
|
||||
|
||||
### :nail_care: Polish
|
||||
- [ ] Description #
|
||||
|
||||
|
||||
### :memo: Documentation
|
||||
- [ ] Description #
|
||||
|
||||
|
||||
### :house: Internal
|
||||
- [ ] Description #
|
||||
|
||||
@ -40,21 +40,28 @@
|
||||
### Ship checklist
|
||||
|
||||
- [ ] Update `CHANGELOG.md`
|
||||
- [ ] Update the `version` field in `package.json` to match the release version
|
||||
- [ ] [Create a new release](https://github.com/primer/css/releases/new)
|
||||
- [ ] [Update github/github](https://github.com/primer/css/blob/master/RELEASING.md#in-githubgithub)
|
||||
- [ ] Create a new pull request for the next release
|
||||
- [ ] Update the `version` field in `package.json`
|
||||
- [ ] Test the release candidate version with `github/github`
|
||||
- [ ] Merge this PR and [create a new release](https://github.com/primer/css/releases/new)
|
||||
- [ ] Update `github/github`
|
||||
|
||||
For more details, see [RELEASING.md](https://github.com/primer/css/blob/master/RELEASING.md).
|
||||
|
||||
/cc @primer/ds-core
|
||||
```
|
||||
|
||||
1. Update `CHANGELOG.md`
|
||||
|
||||
1. Update the `version` field in `package.json` to match the release version. You may also run the `npm version v<version>` command.
|
||||
|
||||
1. Wait for your checks to pass, and take note of the version that [primer/publish] lists in your status checks.
|
||||
|
||||
**ProTip:** The release candidate version will always be `<version>-rc.<sha>`, where `<version>` comes from the branch name and `<sha>` is the 7-character commit SHA.
|
||||
|
||||
### In `github/github`:
|
||||
|
||||
1. Create a new branch.
|
||||
## Test the release candidate (in `github/github`):
|
||||
|
||||
1. Create a new branch in the `github/github` repo, name it `primer-<version>`.
|
||||
|
||||
1. Update the Primer CSS version to the published release candidate with:
|
||||
|
||||
@ -62,23 +69,37 @@
|
||||
bin/npm install @primer/css@<version>-rc.<sha>
|
||||
```
|
||||
|
||||
Then commit and push the changes to `package.json`, `package-lock.json`, and `vendor/npm`.
|
||||
Then commit and push the changes to `package.json`, `package-lock.json`, `LICENSE` and `vendor/npm`.
|
||||
|
||||
1. If you need to make changes to github/github due to the Primer release, do them in a branch and merge _that_ into your release branch after testing.
|
||||
1. If you need to make changes to github/github due to the Primer CSS release, do them in a branch and merge _that_ into your release branch after testing.
|
||||
|
||||
1. Add or re-request reviewers and fix any breaking tests.
|
||||
|
||||
1. Test on review-lab.
|
||||
|
||||
1. Publish `@primer/css` to the `latest` dist-tag by merging the release branch and waiting for [primer/publish] to finish.
|
||||
|
||||
1. Install the latest published version with:
|
||||
## Publish the release (in `primer/css`)
|
||||
|
||||
1. If the release PR got approved and you've done necessary testing, merge it.
|
||||
|
||||
After tests run, the docs site will be deployed and `@primer/css` will be published with your changes to the `latest` dist-tag. You can check [npm](https://www.npmjs.com/package/@primer/css?activeTab=versions) to see if [primer/publish] has finished.
|
||||
|
||||
1. [Create a new release](https://github.com/primer/primer/releases/new) with tag `v<version>`.
|
||||
|
||||
1. Copy the changes from the [CHANGELOG] and paste them into the release notes.
|
||||
|
||||
1. Publish 🎉
|
||||
|
||||
|
||||
## Update github.com (in `github/github`):
|
||||
|
||||
1. Install the latest published version in the same `primer-<version>` branch created earlier with:
|
||||
|
||||
```
|
||||
bin/npm install @primer/css@<version>
|
||||
```
|
||||
|
||||
Then commit and push the changes to `package.json`, `package-lock.json`, and `vendor/npm`.
|
||||
Then commit and push the changes to `package.json`, `package-lock.json`, `LICENSE` and `vendor/npm`.
|
||||
|
||||
1. Fix any breaking tests.
|
||||
|
||||
@ -87,11 +108,12 @@
|
||||
|
||||
### Publish the release
|
||||
|
||||
1. [Create a new release](https://github.com/primer/primer/releases/new) with tag `v<version>`.
|
||||
1. [Create a new release](https://github.com/primer/css/releases/new) with tag `v<version>`.
|
||||
|
||||
2. Copy the changes from the [CHANGELOG] and paste them into the release notes.
|
||||
|
||||
3. Publish 🎉
|
||||
|
||||
|
||||
[changelog]: ../CHANGELOG.md
|
||||
[primer/publish]: https://github.com/primer/publish
|
||||
|
||||
@ -1,12 +1,22 @@
|
||||
import React from 'react'
|
||||
import {Heading, Link} from '@primer/components'
|
||||
import {CodeExample} from '@primer/blueprints'
|
||||
import {Link} from '@primer/components'
|
||||
import {MarkdownHeading} from '@primer/blueprints'
|
||||
import {CodeExample} from '@primer/blueprints/next-components'
|
||||
import Outline from './Outline'
|
||||
|
||||
export const H1 = props => <Heading fontSize={6} fontWeight="light" {...props} />
|
||||
export const H1 = props => <MarkdownHeading {...props} />
|
||||
export const H2 = props => <MarkdownHeading as="h2" {...props} />
|
||||
export const H3 = props => <MarkdownHeading as="h3" {...props} />
|
||||
export const H4 = props => <MarkdownHeading as="h4" {...props} />
|
||||
export const H5 = props => <MarkdownHeading as="h5" {...props} />
|
||||
|
||||
export default function getComponents() {
|
||||
return {
|
||||
h1: H1,
|
||||
h2: H2,
|
||||
h3: H3,
|
||||
h4: H4,
|
||||
h5: H5,
|
||||
// render links with our component
|
||||
a: Link,
|
||||
// render code blocks with our wrapper around react-live
|
||||
|
||||
1286
package-lock.json
generated
1286
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@primer/css",
|
||||
"version": "12.2.3",
|
||||
"version": "12.3.0",
|
||||
"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": "https://primer.style/css",
|
||||
"author": "GitHub, Inc.",
|
||||
@ -47,11 +47,11 @@
|
||||
"@githubprimer/octicons-react": "^8.1.3",
|
||||
"@mdx-js/mdx": "^0.16.6",
|
||||
"@mdx-js/tag": "0.15.0",
|
||||
"@primer/blueprints": "3.0.4",
|
||||
"@primer/blueprints": "4.0.1",
|
||||
"@primer/components": "12.0.1",
|
||||
"@primer/next-pages": "0.0.3",
|
||||
"@storybook/addon-viewport": "5.0.0",
|
||||
"@storybook/react": "5.0.0",
|
||||
"@storybook/react": "5.0.10",
|
||||
"@svgr/webpack": "2.4.1",
|
||||
"@zeit/next-css": "^1.0.1",
|
||||
"@zeit/next-sass": "^1.0.1",
|
||||
@ -70,6 +70,7 @@
|
||||
"eslint": "4.19.1",
|
||||
"eslint-plugin-github": "1.0.0",
|
||||
"execa": "^0.10.0",
|
||||
"filesize": "4.1.2",
|
||||
"fs-extra": "^4.0.2",
|
||||
"fx": "11.0.1",
|
||||
"gh-pages": "^1.0.0",
|
||||
@ -86,7 +87,9 @@
|
||||
"metalsmith-filter": "^1.0.2",
|
||||
"metalsmith-matters": "^1.2.0",
|
||||
"metalsmith-watch": "^1.0.3",
|
||||
"minimist": "1.2.0",
|
||||
"next": "7.0.2",
|
||||
"node-fetch": "2.4.0",
|
||||
"now": "^12.1.8",
|
||||
"npm-run-all": "4.1.5",
|
||||
"postcss": "7.0.14",
|
||||
@ -116,6 +119,7 @@
|
||||
"styled-components": "4.1.2",
|
||||
"stylelint": "9.10.1",
|
||||
"stylelint-config-primer": "7.0.0",
|
||||
"table": "5.2.3",
|
||||
"title-case": "^2.1.1",
|
||||
"tree-model": "^1.0.7",
|
||||
"typographic-base": "^1.0.4",
|
||||
|
||||
@ -2,16 +2,22 @@ import React from 'react'
|
||||
import App, {Container} from 'next/app'
|
||||
import {MDXProvider} from '@mdx-js/tag'
|
||||
import Head from 'next/head'
|
||||
import {BaseStyles, BorderBox, Box, Flex, theme} from '@primer/components'
|
||||
import Octicon, {Pencil} from '@githubprimer/octicons-react'
|
||||
import {BaseStyles, Link, Text, BorderBox, Box, Flex, theme} from '@primer/components'
|
||||
import {PackageHeader} from '../docs/components'
|
||||
import {Header, JumpNav, Section, RouteMatch, SectionLink, SideNav} from '@primer/blueprints'
|
||||
import {Header, MarkdownHeading, JumpNav, SideNav} from '@primer/blueprints'
|
||||
import {NavList} from '@primer/blueprints/next-components'
|
||||
import getComponents from '../docs/markdown'
|
||||
import documents from '../searchIndex'
|
||||
import {config, requirePage, rootPage} from '../docs/utils'
|
||||
import {CONTENT_MAX_WIDTH} from '../docs/constants'
|
||||
import {repository} from '../package.json'
|
||||
|
||||
import '../src/index.scss'
|
||||
|
||||
const DocLink = props => <Link nounderline {...props} />
|
||||
const editLinkBase = `${repository}/edit/master/pages`
|
||||
|
||||
export default class MyApp extends App {
|
||||
static async getInitialProps({Component, ctx}) {
|
||||
let page = {}
|
||||
@ -27,9 +33,9 @@ export default class MyApp extends App {
|
||||
// strip the trailing slash
|
||||
const pathname = this.props.router.pathname.replace(/\/$/, '')
|
||||
const {Component, page} = this.props
|
||||
|
||||
const node = rootPage.first(node => node.path === pathname) || {}
|
||||
const {file, meta = {}} = node || {}
|
||||
const isIndex = file.includes('index')
|
||||
const components = getComponents(node)
|
||||
|
||||
const Hero = file ? requirePage(file).Hero : null
|
||||
@ -58,7 +64,7 @@ export default class MyApp extends App {
|
||||
{Hero ? <Hero /> : null}
|
||||
<Box color="gray.9" maxWidth={['auto', 'auto', 'auto', CONTENT_MAX_WIDTH]} px={6} mx="auto" my={6}>
|
||||
<div className="markdown-body">
|
||||
{!meta.hero && meta.title ? <h1>{meta.title}</h1> : null}
|
||||
{!meta.hero && meta.title ? <MarkdownHeading>{meta.title}</MarkdownHeading> : null}
|
||||
<PackageHeader {...meta} />
|
||||
<MDXProvider components={components}>
|
||||
<Component {...page} />
|
||||
@ -69,6 +75,17 @@ export default class MyApp extends App {
|
||||
<pre>{JSON.stringify(meta, null, 2)}</pre>
|
||||
</details>
|
||||
)}
|
||||
{pathname && (
|
||||
<Box color="gray.5" borderColor="gray.2" borderTop={1} my={6} pt={2}>
|
||||
<Text mr={2}>
|
||||
<Octicon icon={Pencil} />
|
||||
</Text>
|
||||
<DocLink muted href={`${editLinkBase}${pathname}${isIndex ? '/index' : ''}.md`}>
|
||||
Edit this page
|
||||
</DocLink>{' '}
|
||||
on GitHub
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
@ -83,19 +100,13 @@ export default class MyApp extends App {
|
||||
borderTop={[1, 1, 0, 0]}
|
||||
>
|
||||
<SideNav>
|
||||
<Section path="/css/getting-started" />
|
||||
<Section path="/css/principles" />
|
||||
<Section path="/css/tools" />
|
||||
<Section path="/css/whats-new" />
|
||||
<RouteMatch path="/css">
|
||||
<Section>
|
||||
<SectionLink color='black' href="status-key" />
|
||||
</Section>
|
||||
<Section path="support" />
|
||||
<Section path="utilities" />
|
||||
<Section path="objects" />
|
||||
<Section path="components" />
|
||||
</RouteMatch>
|
||||
<NavList currentPath={pathname} path="/css/getting-started" />
|
||||
<NavList currentPath={pathname} path="/css/tools" />
|
||||
<NavList currentPath={pathname} path="/css/principles" />
|
||||
<NavList currentPath={pathname} path="/css/support" />
|
||||
<NavList currentPath={pathname} path="/css/utilities" />
|
||||
<NavList currentPath={pathname} path="/css/objects" />
|
||||
<NavList currentPath={pathname} path="/css/components" />
|
||||
</SideNav>
|
||||
</BorderBox>
|
||||
</Flex>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import {Heading} from '@primer/components'
|
||||
import {redirectTrailingSlash} from '@primer/blueprints'
|
||||
import {redirectTrailingSlash} from '@primer/blueprints/next-components'
|
||||
|
||||
export default class extends React.Component {
|
||||
static getInitialProps(context) {
|
||||
|
||||
@ -50,7 +50,7 @@ All our inputs and buttons side-by-side for easy testing of sizing and alignment
|
||||
|
||||
#### Example form
|
||||
|
||||
Form controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.
|
||||
Form controls in Primer CSS currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.
|
||||
|
||||
```html
|
||||
<form>
|
||||
@ -125,7 +125,7 @@ Webkit sometimes gets confused and tries to add an icon/dropdown to autofill con
|
||||
|
||||
#### Selects
|
||||
|
||||
Primer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.
|
||||
Primer CSS adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.
|
||||
|
||||
```html
|
||||
<form>
|
||||
|
||||
@ -7,7 +7,7 @@ bundle: navigation
|
||||
---
|
||||
|
||||
|
||||
Primer comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently.
|
||||
Primer CSS comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
@ -317,5 +317,3 @@ You can also use a `subnav-search-context` to display search help in a select me
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ Guidelines for contributing to GitHub's CSS.
|
||||
- [Decision process for adding new styles](#decision-process-for-adding-new-styles)
|
||||
- [Step-by-step instructions for adding new styles](#step-by-step-instructions-for-adding-new-styles)
|
||||
- [Documentation structure](#documentation-structure)
|
||||
- [Primer modules](#primer-modules)
|
||||
- [Primer CSS modules](#primer-css-modules)
|
||||
- [Ship checklist](#ship-checklist)
|
||||
|
||||
## Decision process for adding new styles
|
||||
@ -72,7 +72,7 @@ Let the [design systems team](https://github.com/github/design-systems) know if
|
||||
|
||||
## Documentation structure
|
||||
|
||||
_**Note:** Documentation for Primer modules should live in the `README` of that module, see the [primer modules](#primer-modules) section below for more details. The [anatomy of a guide](#anatomy-of-a-guide) will work the same as part of a module README as well as regular markdown documentation._
|
||||
_**Note:** Documentation for Primer CSS modules should live in the `README` of that module, see the [primer modules](#primer-modules) section below for more details. The [anatomy of a guide](#anatomy-of-a-guide) will work the same as part of a module README as well as regular markdown documentation._
|
||||
|
||||
The style guide takes a content first approach. Everything you see on the site is built from markdown files found in this folder.
|
||||
|
||||
@ -171,7 +171,7 @@ When using code blocks for demo purposes, you can choose to render each of the b
|
||||
```
|
||||
```
|
||||
|
||||
## Primer modules
|
||||
## Primer CSS modules
|
||||
|
||||
Modules are created for all the styles we include in the Primer framework. Modules are folders with a specific structure that include CSS, a `package.json`, and other files for publishing to repositories in our GitHub Primer organization and NPM.
|
||||
|
||||
@ -250,6 +250,6 @@ To publish, there are two requirements. First, you must be on the `master` branc
|
||||
|
||||
#### Versioning
|
||||
|
||||
All the individual Primer modules are [semver](http://semver.org/) versioned. This helps others know when a change is a patch, minor, or breaking change.
|
||||
Primer CSS follows [semantic versioning](http://semver.org/) conventions. This helps others know when a change is a patch, minor, or breaking change.
|
||||
|
||||
To understand what choice to make, you'll need to understand semver and know if one of the changes shown is a major, minor, or patch. Semver is confusing at first, so I recommend reviewing [semver](http://semver.org/) and/or ask in [#design-systems](https://github.slack.com/archives/design-systems) or and experienced open-source contributor.
|
||||
|
||||
@ -3,26 +3,26 @@ title: Getting started
|
||||
path: getting-started/index
|
||||
---
|
||||
|
||||
Our CSS framework, Primer, is [open-sourced on GitHub](https://github.com/primer/primer) and [hosted on npm](https://www.npmjs.com/package/primer). Our modules are grouped into three packages: [primer-core](https://github.com/primer/primer/tree/master/modules/primer-core), [primer-product](https://github.com/primer/primer/tree/master/modules/primer-product), and [primer-marketing](https://github.com/primer/primer/tree/master/modules/primer-marketing). `primer-core` contains packages used in both product (github.com) and marketing (logged out homepage). To install all of primer, you can use [primer](https://github.com/primer/primer) which is a grouping of core, product and marketing.
|
||||
Primer CSS is [open-sourced on GitHub](https://github.com/primer/primer) and [available on npm](https://www.npmjs.com/package/primer).
|
||||
|
||||
## Installing via npm
|
||||
|
||||
We recommend using npm to install primer because of how easy npm is for managing dependencies.
|
||||
We recommend installing Primer CSS with npm: `npm install --save @primer/css`.
|
||||
|
||||
### Before you start
|
||||
|
||||
Primer packages require npm version 3 or above. You can check what version you have by running `npm -v`. If you have a version that's older than 3.0, you can update it by running `npm install npm@latest -g`. For more info, read the [npm install docs](https://docs.npmjs.com/getting-started/installing-node).
|
||||
Primer CSS requires npm version 3 or above. You can check which version you have by running `npm -v`. If you have a version that's older than 3.0, you can update it with `npm install npm@latest -g`. For more info, read the [npm install docs](https://docs.npmjs.com/getting-started/installing-node).
|
||||
|
||||
### Initialize npm project
|
||||
|
||||
Begin by initializing your project with a `package.json` file. You can read more on how to do this [in the npm documentation](https://docs.npmjs.com/getting-started/using-a-package.json#creating-a-packagejson).
|
||||
|
||||
### Install primer modules
|
||||
### Install Primer CSS
|
||||
|
||||
Install the primer modules you wish to use by running the npm install command. This will install the module and all the dependencies into the `node_modules` directory.
|
||||
Install the Primer CSS npm package modules by running `npm install @primer/css`. This will install all of the SCSS source files into the `node_modules/@primer/css` directory.
|
||||
|
||||
```
|
||||
npm install primer --save
|
||||
npm install @primer/css --save
|
||||
```
|
||||
|
||||
### For a Jekyll site
|
||||
@ -46,19 +46,19 @@ sass:
|
||||
- node_modules/
|
||||
```
|
||||
|
||||
It's best practice to import all of this scss into one file, usually named `index.scss`. From this file you'll import your primer code and any other custom code you write.
|
||||
It's best practice to import all of this scss into one file, usually named `index.scss`. From this file you'll import one or more Primer CSS bundles and any other custom code you write.
|
||||
|
||||
```scss
|
||||
@import "primer-core/index.scss";
|
||||
@import "@primer/css/core/index.scss";
|
||||
// These files live in the same directory as the index file.
|
||||
@import "./custom-1.scss";
|
||||
@import "./custom-2.scss";
|
||||
```
|
||||
|
||||
Here's an example of how it might look if you installed only a few primer components with some custom variable overrides. The `$blue` uses the default primer blue in the text utilities, then the new blue in `"custom-that-uses-primer-variables.scss"` and `.foo`.
|
||||
Here's an example of how it might look if you installed only a few Primer CSS components with some custom variable overrides. The `$blue` uses the default primer blue in the text utilities, then the new blue in `"custom-that-uses-primer-variables.scss"` and `.foo`.
|
||||
|
||||
```scss
|
||||
@import "primer-utilities/index.scss";
|
||||
@import "@primer/css/utilities/index.scss";
|
||||
@import "primer-buttons/index.scss";
|
||||
|
||||
// Import color variables for custom code
|
||||
@ -82,9 +82,9 @@ Don't forget to add the compiled CSS to the `<head>` section of your page.
|
||||
<link href="path/to/style.css" rel="stylesheet">
|
||||
```
|
||||
|
||||
## Using primer on a static site
|
||||
## Using Primer CSS on a static site
|
||||
|
||||
You won't need to install any node modules for a static site, you can use the built CSS. The best thing to do is to [download the built CSS](https://unpkg.com/primer/build/build.css) from the npm module and host it yourself. If that's not an option, you can include a CDN link in your html:
|
||||
You won't need to install any node modules or Sass compilers for a static site; you can use the built CSS. The best thing to do is to [download the built CSS](https://unpkg.com/@primer/css/dist/primer.css) from the [unpkg.com](https://unpkg.com) and host it yourself. If that's not an option, you can include a CDN link in your HTML:
|
||||
|
||||
```html inert=true
|
||||
<link href="https://unpkg.com/primer/build/build.css" rel="stylesheet">
|
||||
|
||||
@ -43,13 +43,13 @@ Styles can be mixed and matched to achieve many different layouts, independent o
|
||||
|
||||
## Systematically designed for GitHub
|
||||
|
||||
Primer is built upon systems that form the foundation of our styles such as spacing, typography, and color. This systematic approach helps ensure our styles are consistent and interoperable with each other.
|
||||
Primer CSS is built upon systems that form the foundation of our styles such as spacing, typography, and color. This systematic approach helps ensure our styles are consistent and interoperable with each other.
|
||||
|
||||
<PrimitivesOverview />
|
||||
|
||||
## Primer packages
|
||||
## Primer CSS bundles
|
||||
|
||||
Each component or group of styles is packaged up and distributed via npm. Primer includes 23 packages that are grouped into useful 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.
|
||||
Each component or group of styles is distributed via npm as a separate CSS file, or "bundle". We also distribute "meta-packages" for core (shared) elements, product-specific (github.com) styles, and marketing.
|
||||
|
||||
<PrimerPackageBox meta={bundles.primer} count={Object.keys(bundles).length - 1} mb={4} />
|
||||
|
||||
@ -69,8 +69,8 @@ Each component or group of styles is packaged up and distributed via npm. Primer
|
||||
<div class="bg-gray py-6">
|
||||
<div class="d-flex flex-wrap flex-md-nowrap px-6 gutter-lg">
|
||||
<div class="col-12 col-md-9 pr-0 pr-lg-2">
|
||||
<h3 class="f3 text-normal m-0">Use Primer in your project</h3>
|
||||
<p class="my-3">Pick and choose what you need. Install the entire Primer bundle or individual packages via npm.</p>
|
||||
<h3 class="f3 text-normal m-0">Use Primer CSS in your project</h3>
|
||||
<p class="my-3">Pick and choose what you need. Install the entire Primer CSS bundle or individual packages via npm.</p>
|
||||
<a href="/css/getting-started" class="btn btn-outline">Installation instructions</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,7 +8,7 @@ bundle: layout
|
||||
---
|
||||
|
||||
|
||||
Primer's layout includes basic page containers and a single-tiered, fraction-based grid system. That sounds more complicated than it really is though—it's just containers, rows, and columns.
|
||||
Primer CSS's layout includes basic page containers and a single-tiered, fraction-based grid system. That sounds more complicated than it really is though—it's just containers, rows, and columns.
|
||||
|
||||
You can find all the below styles in `_layout.scss`.
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ path: status-key
|
||||
|
||||
import StatusLabel from '../../docs/StatusLabel'
|
||||
|
||||
Primer is constantly evolving and we have many styles to refactor and bring up to standard. The status of each package is shown with it's corresponding documentation so you can be confident which styles are safe to use.
|
||||
Primer CSS is constantly evolving and we have many styles to refactor and bring up to standard. The status of each package is shown with it's corresponding documentation so you can be confident which styles are safe to use.
|
||||
|
||||
| Label | Description |
|
||||
| :----- | :--- |
|
||||
|
||||
@ -6,7 +6,7 @@ bundle: support
|
||||
---
|
||||
|
||||
|
||||
Primer is built on systems that form the foundation of our styles, and inform the way we write and organize our CSS. Building upon systems helps us make styles consistent and interoperable with each other, and assists us with visual hierarchy and vertical rhythm.
|
||||
Primer CSS is built on systems that form the foundation of our styles, and inform the way we write and organize our CSS. Building upon systems helps us make styles consistent and interoperable with each other, and assists us with visual hierarchy and vertical rhythm.
|
||||
|
||||
We use Sass variables to keep color, typography, spacing, and other foundations of our system consistent. Occasionally we use Sass mixins to apply multiple CSS properties, they are a convenient solution for frequently-used verbose patterns.
|
||||
|
||||
@ -16,4 +16,3 @@ We've documented variables, mixins, and the systems they are built on for the fo
|
||||
- [Colors](/css/support/color-system)
|
||||
- [Spacing](/css/support/spacing)
|
||||
- [Typography](/css/support/typography)
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ internal: true
|
||||
path: tools/local-primer
|
||||
---
|
||||
|
||||
When you are working with the `github/github` codebase, you can link Primer modules with your local development environment using the Primerize script. This will allow you to make changes to primer and see them reflected on `github.localhost` without the overhead of pulling in alpha releases of a package.
|
||||
When you are working with the `github/github` codebase, you can link Primer CSS modules with your local development environment using the Primerize script. This will allow you to make changes to Primer CSS and see them reflected on `github.localhost` without the overhead of pulling in alpha releases of a package.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
@ -19,7 +19,7 @@ When you are working with the `github/github` codebase, you can link Primer modu
|
||||
└── primer
|
||||
```
|
||||
|
||||
## Linking to your local primer repository
|
||||
## Linking to your local Primer CSS repository
|
||||
|
||||
In your terminal start the server with the environment variable `LOCAL_PRIMER=1`. For example.
|
||||
|
||||
@ -27,7 +27,7 @@ In your terminal start the server with the environment variable `LOCAL_PRIMER=1`
|
||||
> LOCAL_PRIMER=1 script/server
|
||||
```
|
||||
|
||||
When the variable is present, the script will check for linked local Primer packages. If it's not linked, then it will proceed to link the primer packages in `../primer` to your GitHub application. When the server starts with successfully linked packages, you will see a clear message.
|
||||
When the variable is present, the script will check for linked local Primer CSS packages. If it's not linked, then it will proceed to link the Primer CSS packages in `../primer` to your GitHub application. When the server starts with successfully linked packages, you will see a clear message.
|
||||
|
||||
**Example output:**
|
||||
|
||||
|
||||
@ -7,10 +7,10 @@ You're welcome to use whatever prototyping tool suits your needs, however we've
|
||||
|
||||
The power of prototyping in code is that you can create clickable mocks that can be shared via a URL. This can be useful for exploring designs and interactions or for user research sessions. Prototypes can be throw-away, or part of your process for building out new features since you can work with the same CSS we use in production.
|
||||
|
||||
## Simple HTML prototype with Primer
|
||||
Copy the code below and paste it in a HTML file. The CDN link is always linked to the most up to date version of Primer and includes all of the modules in the core, product, and marketing packages.
|
||||
## Simple HTML prototype with Primer CSS
|
||||
Copy the code below and paste it in a HTML file. The CDN link is always linked to the most up to date version of Primer CSS and includes all of the modules in the core, product, and marketing packages.
|
||||
|
||||
This method requires no dev environment set up and is useful for when you want to create simple prototypes using Primer.
|
||||
This method requires no dev environment set up and is useful for when you want to create simple prototypes using Primer CSS.
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
@ -27,7 +27,7 @@ This method requires no dev environment set up and is useful for when you want t
|
||||
```
|
||||
|
||||
## Jekyll prototyping with GitHub CSS and JavaScript
|
||||
The [Jekyll](http://jekyllrb.com) based prototyping tool pulls in all of GitHub's CSS, which includes all the Primer modules as well as custom CSS modules. It includes GitHub JavaScript and octicons too.
|
||||
The [Jekyll](http://jekyllrb.com) based prototyping tool pulls in all of GitHub's CSS, which includes all the Primer CSS modules as well as custom CSS modules. It includes GitHub JavaScript and octicons too.
|
||||
|
||||
This tool is useful for when you want to build a more complex prototype with multiple pages, interactions and flows, or need to work with GitHub CSS. You can take advantage of everything you get with [Jekyll](http://jekyllrb.com/docs/home/), such as layout templates, includes, and collections.
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ bundle: marketing-type
|
||||
---
|
||||
|
||||
|
||||
The typography for our marketing pages differs slightly from what is in Primer's core--it is responsive, on a slightly different scale, and headlines are in a different font (Roboto).
|
||||
The typography for our marketing pages differs slightly from what is in Primer CSS's core--it is responsive, on a slightly different scale, and headlines are in a different font (Roboto).
|
||||
|
||||
|
||||
## Heading Utilities
|
||||
@ -30,7 +30,7 @@ Use `.h000-mktg` – `.h6-mktg` to change an element's font, size, and weight on
|
||||
|
||||
## Typographic Utilities
|
||||
|
||||
These utilities are meant to be used in addition to Primer's core utilities.
|
||||
These utilities are meant to be used in addition to Primer CSS's core utilities.
|
||||
|
||||
```html title="Typographic Utilities"
|
||||
|
||||
@ -39,4 +39,3 @@ These utilities are meant to be used in addition to Primer's core utilities.
|
||||
<p class="pullquote">I'm a pullquote. Someone said these words in real life, and now they're on the internet</p>
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
import {redirect} from '@primer/blueprints'
|
||||
import {redirect} from '@primer/blueprints/next-components'
|
||||
export default redirect('/css')
|
||||
|
||||
162
script/bundle-size-report
Executable file
162
script/bundle-size-report
Executable file
@ -0,0 +1,162 @@
|
||||
#!/usr/bin/env node
|
||||
const fetch = require('node-fetch')
|
||||
const filesize = require('filesize')
|
||||
const minimist = require('minimist')
|
||||
const {green, gray, yellow, red} = require('colorette')
|
||||
const {table, getBorderCharacters} = require('table')
|
||||
|
||||
const options = minimist(process.argv.slice(2))
|
||||
|
||||
const DELTA = '±'
|
||||
const VERSION = options.version || 'latest'
|
||||
const QUIET = options.quiet || options.q || 0
|
||||
const SORT = options.sort || options.s || 'gzip'
|
||||
// the default is descending
|
||||
const ASCENDING = options.asc || options.a
|
||||
const ONLY_BUNDLES = options.only
|
||||
const ALL_BUNDLES = !ONLY_BUNDLES && options.all
|
||||
const META_BUNDLES = options.all || options.meta || false
|
||||
|
||||
const {name} = require('../package.json')
|
||||
const unpkgBaseURL = `https://unpkg.com/${name}@${VERSION}/`
|
||||
|
||||
// ensure that K and B values line up vertically
|
||||
const filesizeConfig = {symbols: {KB: 'K'}}
|
||||
const prettySize = bytes => filesize(bytes, filesizeConfig)
|
||||
const meta = require('../dist/meta.json')
|
||||
|
||||
let bundles = Object.values(meta.bundles)
|
||||
|
||||
// fitler out support bundles, since they don't generate CSS
|
||||
bundles = bundles.filter(bundle => !isSupportBundleName(bundle.name))
|
||||
|
||||
if (ONLY_BUNDLES) {
|
||||
const only = new Set(ONLY_BUNDLES.trim().split(/\s*,\s*/))
|
||||
bundles = bundles.filter(bundle => only.has(bundle.name))
|
||||
} else if (!ALL_BUNDLES) {
|
||||
bundles = META_BUNDLES
|
||||
? bundles.filter(isMetaBundle)
|
||||
: bundles.filter(bundle => !isMetaBundle(bundle))
|
||||
}
|
||||
|
||||
Promise.all(
|
||||
bundles.map(bundle => {
|
||||
const entry = {
|
||||
name: bundle.name,
|
||||
path: bundle.css,
|
||||
local: require(`../${bundle.stats}`)
|
||||
}
|
||||
return fetch(unpkgBaseURL + bundle.stats)
|
||||
.then(res => res.json())
|
||||
.then(stats => (entry.remote = stats))
|
||||
.then(() => entry)
|
||||
})
|
||||
).then(entries => {
|
||||
const columns = [
|
||||
{title: 'name', value: get(d => d.name), alignment: 'left'},
|
||||
|
||||
// CSS selector count
|
||||
{title: 'selectors', value: get(d => d.local.selectors.total)},
|
||||
{title: DELTA, value: delta(d => d.selectors.total), id: 'selector-delta'},
|
||||
|
||||
// gzipped size (bytes)
|
||||
{title: 'gzip size', value: get(d => d.local.gzipSize, prettySize), id: 'gzip'},
|
||||
{title: DELTA, value: delta(d => d.gzipSize, prettySize), id: 'gzip-delta'},
|
||||
|
||||
// raw size (bytes)
|
||||
{title: 'raw size', value: get(d => d.local.size, prettySize), id: 'size'},
|
||||
{title: DELTA, value: delta(d => d.size, prettySize), id: 'size-delta'},
|
||||
|
||||
// path goes last
|
||||
{title: 'path', value: get(d => d.path), alignment: 'left'}
|
||||
]
|
||||
|
||||
for (const [index, column] of Object.entries(columns)) {
|
||||
column.index = index
|
||||
}
|
||||
|
||||
const header = columns.map(c => c.title)
|
||||
let data = entries.map(entry => columns.map(c => c.value(entry)))
|
||||
|
||||
if (SORT) {
|
||||
const index = columns.findIndex(c => c.id === SORT || c.title === SORT)
|
||||
if (index > -1) {
|
||||
const compare = ASCENDING ? compareAscending : compareDescending
|
||||
data.sort((a, b) => compare(a[index].value, b[index].value))
|
||||
} else {
|
||||
console.warn(`No such sort column: "${SORT}"! Output will not be sorted.`)
|
||||
}
|
||||
}
|
||||
|
||||
if (QUIET) {
|
||||
data = data.filter(cells => {
|
||||
return cells.filter((cell, i) => columns[i].title === DELTA).every(cell => cell.value !== 0)
|
||||
})
|
||||
}
|
||||
|
||||
const rows = data.map(cells => cells.map(String))
|
||||
|
||||
console.log(
|
||||
table([header].concat(rows), {
|
||||
columns,
|
||||
columnDefault: {
|
||||
alignment: 'right'
|
||||
},
|
||||
border: getBorderCharacters('norc'),
|
||||
drawHorizontalLine(index, size) {
|
||||
return index <= 1 || index === size
|
||||
}
|
||||
})
|
||||
)
|
||||
})
|
||||
|
||||
function get(getter, format = String) {
|
||||
return entry => {
|
||||
const value = getter(entry)
|
||||
return {
|
||||
value,
|
||||
toString: () => format(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function delta(getter, format = String, options = {}) {
|
||||
const {moreIsGood = false, badThreshold = 1000} = options
|
||||
return entry => {
|
||||
const local = getter(entry.local)
|
||||
const remote = getter(entry.remote)
|
||||
const value = local - remote
|
||||
if (value === 0) {
|
||||
return {
|
||||
value,
|
||||
toString: () => ` ${gray(0)}`
|
||||
}
|
||||
} else {
|
||||
const sign = value > 0 ? '+' : '-'
|
||||
const num = Math.abs(value)
|
||||
const good = moreIsGood ? value > 0 : value < 0
|
||||
const color = good ? green : value >= badThreshold ? red : yellow
|
||||
return {
|
||||
value,
|
||||
toString: () => color(`${sign} ${format(num)}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function isMetaBundle(bundle) {
|
||||
return !bundle.imports.every(isSupportBundleName)
|
||||
}
|
||||
|
||||
function isSupportBundleName(name) {
|
||||
// "support", "marketing-support", and any future ones?
|
||||
return name.endsWith('support')
|
||||
}
|
||||
|
||||
function compareAscending(a, b) {
|
||||
return a - b
|
||||
}
|
||||
|
||||
function compareDescending(a, b) {
|
||||
return b - a
|
||||
}
|
||||
@ -13,3 +13,6 @@ if [[ "$GITHUB_REF" = "refs/heads/master" ]]; then
|
||||
echo "Whoops! Failed to publish Storybook. This is not a fatal error."
|
||||
)
|
||||
fi
|
||||
|
||||
# TODO: remove this in v13
|
||||
rm -rf build/
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
set -e
|
||||
|
||||
# generate the build directory
|
||||
npm run dist
|
||||
npm run --silent dist
|
||||
|
||||
# run the selector diff report
|
||||
script/selector-diff-report
|
||||
# run the bundle size and selector diff reports
|
||||
script/run-reports
|
||||
|
||||
# TODO: remove this in v13
|
||||
mkdir -p build
|
||||
|
||||
8
script/run-reports
Executable file
8
script/run-reports
Executable file
@ -0,0 +1,8 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
echo "Reporting bundle sizes..."
|
||||
script/bundle-size-report --all
|
||||
|
||||
echo "Reporting selector diffs..."
|
||||
script/selector-diff-report
|
||||
@ -2,11 +2,11 @@
|
||||
set -e
|
||||
|
||||
function log() {
|
||||
echo "$@" 1>&2
|
||||
echo "$@" 1>&2
|
||||
}
|
||||
|
||||
function warn() {
|
||||
echo "$@" 1>&2
|
||||
echo "$@" 1>&2
|
||||
}
|
||||
|
||||
pkg="@primer/css"
|
||||
@ -15,15 +15,12 @@ warn "Pulling the old $path from unpkg.com..."
|
||||
curl -sL "https://unpkg.com/$pkg/$path" > before.json
|
||||
|
||||
warn "Building the stats locally..."
|
||||
npm run --silent dist
|
||||
cp $path after.json
|
||||
|
||||
key=".selectors.values[]"
|
||||
jq -r $key before.json > before.txt
|
||||
jq -r $key after.json > after.txt
|
||||
|
||||
warn "[selector report] diff:"
|
||||
(diff before.txt after.txt | tee selector-diff.log) || log "(no diff!)"
|
||||
warn "[selector report] end"
|
||||
diff {before,after}.txt && echo 'no diff!'
|
||||
|
||||
rm {before,after}.{json,txt}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Primer Alerts
|
||||
> Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.
|
||||
|
||||
This repository is a module of the full [primer][primer] repository.
|
||||
This repository is a module of the full [Primer CSS][primer] repository.
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@ -84,6 +84,18 @@ $purple-700: #4c2889 !default;
|
||||
$purple-800: #3a1d6e !default;
|
||||
$purple-900: #29134e !default;
|
||||
|
||||
// -------- Pink --------
|
||||
$pink-000: #ffeef8 !default;
|
||||
$pink-100: #fedbf0 !default;
|
||||
$pink-200: #f9b3dd !default;
|
||||
$pink-300: #f692ce !default;
|
||||
$pink-400: #ec6cb9 !default;
|
||||
$pink-500: #ea4aaa !default;
|
||||
$pink-600: #d03592 !default;
|
||||
$pink-700: #b93a86 !default;
|
||||
$pink-800: #99306f !default;
|
||||
$pink-900: #6d224f !default;
|
||||
|
||||
// -------- Fades --------
|
||||
// Black based on same hue as $gray-900
|
||||
$black: #1b1f23 !default;
|
||||
@ -112,3 +124,120 @@ $orange: $orange-500 !default;
|
||||
$gray-dark: $gray-900 !default;
|
||||
$gray-light: $gray-400 !default;
|
||||
$gray: $gray-500 !default;
|
||||
|
||||
// -------- Color gradient maps --------
|
||||
|
||||
$grays: (
|
||||
0: $gray-000,
|
||||
1: $gray-100,
|
||||
2: $gray-200,
|
||||
3: $gray-300,
|
||||
4: $gray-400,
|
||||
5: $gray-500,
|
||||
6: $gray-600,
|
||||
7: $gray-700,
|
||||
8: $gray-800,
|
||||
9: $gray-900,
|
||||
) !default;
|
||||
|
||||
$blues: (
|
||||
0: $blue-000,
|
||||
1: $blue-100,
|
||||
2: $blue-200,
|
||||
3: $blue-300,
|
||||
4: $blue-400,
|
||||
5: $blue-500,
|
||||
6: $blue-600,
|
||||
7: $blue-700,
|
||||
8: $blue-800,
|
||||
9: $blue-900,
|
||||
) !default;
|
||||
|
||||
$greens: (
|
||||
0: $green-000,
|
||||
1: $green-100,
|
||||
2: $green-200,
|
||||
3: $green-300,
|
||||
4: $green-400,
|
||||
5: $green-500,
|
||||
6: $green-600,
|
||||
7: $green-700,
|
||||
8: $green-800,
|
||||
9: $green-900,
|
||||
) !default;
|
||||
|
||||
$yellows: (
|
||||
0: $yellow-000,
|
||||
1: $yellow-100,
|
||||
2: $yellow-200,
|
||||
3: $yellow-300,
|
||||
4: $yellow-400,
|
||||
5: $yellow-500,
|
||||
6: $yellow-600,
|
||||
7: $yellow-700,
|
||||
8: $yellow-800,
|
||||
9: $yellow-900,
|
||||
) !default;
|
||||
|
||||
$oranges: (
|
||||
0: $orange-000,
|
||||
1: $orange-100,
|
||||
2: $orange-200,
|
||||
3: $orange-300,
|
||||
4: $orange-400,
|
||||
5: $orange-500,
|
||||
6: $orange-600,
|
||||
7: $orange-700,
|
||||
8: $orange-800,
|
||||
9: $orange-900,
|
||||
) !default;
|
||||
|
||||
$reds: (
|
||||
0: $red-000,
|
||||
1: $red-100,
|
||||
2: $red-200,
|
||||
3: $red-300,
|
||||
4: $red-400,
|
||||
5: $red-500,
|
||||
6: $red-600,
|
||||
7: $red-700,
|
||||
8: $red-800,
|
||||
9: $red-900,
|
||||
) !default;
|
||||
|
||||
$purples: (
|
||||
0: $purple-000,
|
||||
1: $purple-100,
|
||||
2: $purple-200,
|
||||
3: $purple-300,
|
||||
4: $purple-400,
|
||||
5: $purple-500,
|
||||
6: $purple-600,
|
||||
7: $purple-700,
|
||||
8: $purple-800,
|
||||
9: $purple-900,
|
||||
) !default;
|
||||
|
||||
$pinks: (
|
||||
0: $pink-000,
|
||||
1: $pink-100,
|
||||
2: $pink-200,
|
||||
3: $pink-300,
|
||||
4: $pink-400,
|
||||
5: $pink-500,
|
||||
6: $pink-600,
|
||||
7: $pink-700,
|
||||
8: $pink-800,
|
||||
9: $pink-900,
|
||||
) !default;
|
||||
|
||||
$hue-maps: (
|
||||
gray: $grays,
|
||||
blue: $blues,
|
||||
green: $greens,
|
||||
yellow: $yellows,
|
||||
orange: $oranges,
|
||||
red: $reds,
|
||||
purple: $purples,
|
||||
pink: $pinks,
|
||||
) !default;
|
||||
|
||||
@ -49,6 +49,7 @@ $bg-green-light: $green-100 !default;
|
||||
$bg-orange: $orange-700 !default;
|
||||
$bg-purple: $purple-500 !default;
|
||||
$bg-purple-light: $purple-000 !default;
|
||||
$bg-pink: $pink-500 !default;
|
||||
$bg-red: $red-500 !default;
|
||||
$bg-red-light: $red-100 !default;
|
||||
$bg-white: $white !default;
|
||||
@ -64,5 +65,6 @@ $text-green: $green-500 !default;
|
||||
$text-orange: $orange-900 !default;
|
||||
$text-orange-light: $orange-600 !default;
|
||||
$text-purple: $purple !default;
|
||||
$text-pink: $pink-500 !default;
|
||||
$text-red: $red-600 !default;
|
||||
$text-white: $white !default;
|
||||
|
||||
@ -29,9 +29,19 @@
|
||||
.bg-yellow-light { background-color: $bg-yellow-light !important; }
|
||||
/* Set the background to $bg-purple */
|
||||
.bg-purple { background-color: $bg-purple !important; }
|
||||
/* Set the background to $bg-pink */
|
||||
.bg-pink { background-color: $bg-pink !important; }
|
||||
/* Set the background to $bg-purple-light */
|
||||
.bg-purple-light { background-color: $bg-purple-light !important; }
|
||||
|
||||
// Generate a foreground and background utility for every shade of every hue
|
||||
@each $hue, $shades in $hue-maps {
|
||||
@each $index, $color in $shades {
|
||||
.color-#{$hue}-#{$index} { color: $color !important; }
|
||||
.bg-#{$hue}-#{$index} { background-color: $color !important; }
|
||||
}
|
||||
}
|
||||
|
||||
.bg-shade-gradient {
|
||||
background-image: linear-gradient(180deg, rgba($black, 0.065), rgba($black, 0)) !important;
|
||||
background-repeat: no-repeat !important;
|
||||
@ -57,6 +67,8 @@
|
||||
.text-orange-light { color: $text-orange-light !important; }
|
||||
/* Set the text color to $text-purple */
|
||||
.text-purple { color: $text-purple !important; }
|
||||
/* Set the text color to $text-pink */
|
||||
.text-pink { color: $text-pink !important; }
|
||||
/* Set the text color to $text-white */
|
||||
.text-white { color: $text-white !important; }
|
||||
/* Set the text color to inherit */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user