mirror of
https://github.com/primer/css.git
synced 2025-01-03 03:34:16 +03:00
Merge branch 'master' into brocs_test
This commit is contained in:
simurai
GitHub
commit
28f4dce0cf
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
|
||||
|
||||
---
|
||||
|
||||
2
.github/main.workflow
vendored
2
.github/main.workflow
vendored
@ -34,7 +34,7 @@ action "publish" {
|
||||
|
||||
action "deploy" {
|
||||
needs = "install"
|
||||
uses = "primer/deploy@v2.2.0"
|
||||
uses = "primer/deploy@v3.0.0"
|
||||
secrets = [
|
||||
"GITHUB_TOKEN",
|
||||
"NOW_TOKEN",
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -8,3 +8,4 @@
|
||||
_site
|
||||
dist/
|
||||
node_modules/
|
||||
searchIndex.js
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
{
|
||||
"extends": [
|
||||
"stylelint-config-primer"
|
||||
]
|
||||
],
|
||||
"rules": {
|
||||
"primer/no-override": false,
|
||||
"primer/selector-no-utility": false
|
||||
}
|
||||
}
|
||||
|
||||
80
CHANGELOG.md
80
CHANGELOG.md
@ -1,3 +1,75 @@
|
||||
# 12.3.1
|
||||
|
||||
### 🐛 Bug Fix
|
||||
- Add `aria-selected="true"` support to tabbed navigation styles to play nicely with [`<tab-container>`](https://github.com/github/tab-container-element)
|
||||
|
||||
### 🏠 Internal
|
||||
- Resolve the vulnerability alert with `tar@<4.4.2` in [CVE-2018-20834](https://nvd.nist.gov/vuln/detail/CVE-2018-20834)
|
||||
|
||||
### Committers
|
||||
- [@shawnbot](https://github.com/shawnbot)
|
||||
|
||||
# 12.3.0
|
||||
|
||||
### :rocket: Enhancement
|
||||
- More color utilities! [#760](https://github.com/primer/css/pull/760) ([@shawnbot](https://github.com/shawnbot))
|
||||
- Add pink to Primer! 💖🌸💕🌷💞🎀💗🌺💝 [#776](https://github.com/primer/css/pull/776), [#778](https://github.com/primer/css/pull/778) ([@emplums](https://github.com/emplums)))
|
||||
|
||||
### :house: Internal
|
||||
- Update storybook [#777](https://github.com/primer/css/pull/777) ([@emplums](https://github.com/emplums))
|
||||
- Add bundle size report [#772](https://github.com/primer/css/pull/772) ([@shawnbot](https://github.com/shawnbot))
|
||||
|
||||
### :memo: Documentation
|
||||
- Update Primer references to Primer CSS [#771](https://github.com/primer/css/pull/771) ([@emplums](https://github.com/emplums))
|
||||
- Add Edit on GitHub links to docs [#770](https://github.com/primer/css/pull/770) ([@emplums](https://github.com/emplums))
|
||||
- Anchor Link in Docs [#768](https://github.com/primer/css/pull/768) ([@emplums](https://github.com/emplums))
|
||||
|
||||
### :house: Internal
|
||||
- Update RELEASING [#757](https://github.com/primer/css/pull/757) ([@simurai](https://github.com/simurai))
|
||||
|
||||
### Committers
|
||||
- [@emplums](https://github.com/emplums)
|
||||
- [@shawnbot](https://github.com/shawnbot)
|
||||
- [@simurai](https://github.com/simurai)
|
||||
|
||||
# 12.2.3
|
||||
|
||||
### :bug: Bug Fix
|
||||
- Remove references to a non-existent `Progress-value` class https://github.com/primer/css/pull/751
|
||||
|
||||
### :house: Internal
|
||||
- Upgrade stylelint config https://github.com/primer/css/pull/753
|
||||
|
||||
#### Committers: 1
|
||||
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
|
||||
|
||||
# 12.2.2
|
||||
|
||||
### :bug: Bug Fix
|
||||
- Fix hide utilities when toggling between breakpoints [#746](https://github.com/primer/css/pull/746)
|
||||
|
||||
### :house: Internal
|
||||
- Prevent Storybook publish failures from breaking builds on `master` [#728](https://github.com/primer/css/pull/728)
|
||||
- Upgrade to [cssstats v3.3.0](https://github.com/cssstats/cssstats/releases/tag/v3.3.0), which fixes our selector stats JSON files
|
||||
|
||||
#### Committers: 2
|
||||
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
|
||||
- Simurai ([simurai](https://github.com/simurai))
|
||||
|
||||
# 12.2.1
|
||||
|
||||
### :bug: Bug Fix
|
||||
- Fix source order of directional border utilities [#727](https://github.com/primer/css/pull/727)
|
||||
- Fix UnderlineNav selected border width [#733](https://github.com/primer/css/pull/733)
|
||||
|
||||
### :memo: Documentation
|
||||
- Fix changelog committers listings for versions 12.0.1 and 12.0.2 [#729](https://github.com/primer/css/pull/729)
|
||||
- Fix code examples from being cut off [#725](https://github.com/primer/css/pull/725)
|
||||
|
||||
#### Committers: 2
|
||||
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
|
||||
- Simurai ([simurai](https://github.com/simurai))
|
||||
|
||||
# 12.2.0
|
||||
|
||||
### :rocket: Enhancement
|
||||
@ -7,19 +79,19 @@
|
||||
- Fix `<details>` spacing [#675](https://github.com/primer/css/pull/675)
|
||||
|
||||
### :bug: Bug Fixes
|
||||
- Accessibility fixes for marketing buttons [#716](https://github.com/primer/css/pull/716)
|
||||
- Accessibility fixes for marketing buttons [#716](https://github.com/primer/css/pull/716)
|
||||
|
||||
### :memo: Documentation
|
||||
- Fix scrolling of code examples [#717](https://github.com/primer/css/pull/717)
|
||||
|
||||
### :house: Internal
|
||||
- Fix `npm link` ([#715](https://github.com/primer/css/issue/715)) by removing `prepare` npm script [#718](https://github.com/primer/css/pull/718)
|
||||
- Fix `npm link` ([#715](https://github.com/primer/css/issue/715)) by removing `prepare` npm script [#718](https://github.com/primer/css/pull/718)
|
||||
|
||||
#### Committers: 4
|
||||
- Diana Mounter ([broccolini](https://github.com/broccolini))
|
||||
- Max Stoiber ([https://github.com/mxstbr](mxstbr))
|
||||
- Max Stoiber ([mxstbr](https://github.com/mxstbr))
|
||||
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
|
||||
- Simurai ([https://github.com/simurai](simurai))
|
||||
- Simurai ([simurai](https://github.com/simurai))
|
||||
|
||||
# 12.1.1
|
||||
|
||||
|
||||
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,8 +0,0 @@
|
||||
import {Box} from '@primer/components'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const BoxShadow = styled(Box)`
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
`
|
||||
|
||||
export default BoxShadow
|
||||
@ -1,47 +0,0 @@
|
||||
import React from 'react'
|
||||
import {findDOMNode} from 'react-dom'
|
||||
import {Button} from '@primer/components'
|
||||
import Octicon, {Clippy} from '@githubprimer/octicons-react'
|
||||
|
||||
export default class ClipboardCopy extends React.Component {
|
||||
copy() {
|
||||
const {value = ''} = this.props
|
||||
const {clipboard} = window.navigator
|
||||
const done = () => {
|
||||
// eslint-disable-next-line react/no-find-dom-node
|
||||
findDOMNode(this).dispatchEvent(new CustomEvent('copy', {bubbles: false}))
|
||||
}
|
||||
if (clipboard) {
|
||||
return clipboard.writeText(value).then(done)
|
||||
} else if (!document.body) {
|
||||
return
|
||||
} else {
|
||||
const node = document.createElement('pre')
|
||||
node.style.width = '1px'
|
||||
node.style.height = '1px'
|
||||
node.style.position = 'fixed'
|
||||
node.style.top = '5px'
|
||||
node.textContent = value
|
||||
|
||||
const selection = window.getSelection()
|
||||
document.body.appendChild(node)
|
||||
selection.removeAllRanges()
|
||||
const range = document.createRange()
|
||||
range.selectNodeContents(node)
|
||||
selection.addRange(range)
|
||||
document.execCommand('copy')
|
||||
selection.removeAllRanges()
|
||||
document.body.removeChild(node)
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const {value = '', ...rest} = this.props
|
||||
return (
|
||||
<Button onClick={() => this.copy()} type="button" {...rest}>
|
||||
<Octicon icon={Clippy} />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,81 +0,0 @@
|
||||
import React from 'react'
|
||||
import HTMLtoJSX from 'html-2-jsx'
|
||||
import {Absolute, BorderBox, Box, StyledOcticon as Octicon, Relative, Text} from '@primer/components'
|
||||
import {LiveEditor, LiveError, LivePreview, LiveProvider} from 'react-live'
|
||||
import {getIconByName} from '@githubprimer/octicons-react'
|
||||
import ClipboardCopy from './ClipboardCopy'
|
||||
import Frame from './Frame'
|
||||
|
||||
import 'prism-github/prism-github.scss'
|
||||
|
||||
const LANG_PATTERN = /\blanguage-\.?(jsx|html)\b/
|
||||
|
||||
const converter = new HTMLtoJSX({
|
||||
indent: ' ',
|
||||
createClass: false
|
||||
})
|
||||
|
||||
const defaultTransform = code => `<React.Fragment>${code}</React.Fragment>`
|
||||
|
||||
const languageTransforms = {
|
||||
html: html => defaultTransform(converter.convert(html)),
|
||||
jsx: defaultTransform
|
||||
}
|
||||
|
||||
export default function CodeExample(props) {
|
||||
const {children, dangerouslySetInnerHTML, inert, source, ...rest} = props
|
||||
const lang = getLanguage(props.className)
|
||||
if (lang && !inert) {
|
||||
const liveProps = {
|
||||
code: source,
|
||||
scope: {Octicon, getIconByName},
|
||||
transformCode: getTransformForLanguage(lang),
|
||||
mountStylesheet: false
|
||||
}
|
||||
return (
|
||||
<LiveProvider {...liveProps}>
|
||||
<BorderBox {...rest}>
|
||||
<BorderBox bg="white" p={3} border={0} borderBottom={1} borderRadius={0}>
|
||||
<Frame>
|
||||
<LivePreview />
|
||||
</Frame>
|
||||
</BorderBox>
|
||||
<Box is={Relative} bg="gray.1" p={3}>
|
||||
<LiveEditor style={{margin: 0, padding: 0}} />
|
||||
<Absolute right={0} top={0} m={3}>
|
||||
<ClipboardCopy value={source} />
|
||||
</Absolute>
|
||||
<Text
|
||||
is={LiveError}
|
||||
fontFamily="mono"
|
||||
style={{
|
||||
overflow: 'auto',
|
||||
whiteSpace: 'pre'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</BorderBox>
|
||||
</LiveProvider>
|
||||
)
|
||||
} else {
|
||||
const rest = {
|
||||
children,
|
||||
dangerouslySetInnerHTML
|
||||
}
|
||||
// eslint-disable-next-line react/no-danger-with-children
|
||||
return <BorderBox data-source={source} is="pre" {...rest} />
|
||||
}
|
||||
}
|
||||
|
||||
CodeExample.defaultProps = {
|
||||
my: 4
|
||||
}
|
||||
|
||||
function getLanguage(className) {
|
||||
const match = className && className.match(LANG_PATTERN)
|
||||
return match ? match[1] : undefined
|
||||
}
|
||||
|
||||
function getTransformForLanguage(lang) {
|
||||
return lang in languageTransforms ? languageTransforms[lang] : null
|
||||
}
|
||||
@ -1,70 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import Measure from 'react-measure'
|
||||
import {BorderBox} from '@primer/components'
|
||||
import {assetPrefix} from './utils'
|
||||
|
||||
export default class Frame extends React.Component {
|
||||
static defaultProps = {
|
||||
border: 0,
|
||||
borderRadius: 0,
|
||||
minHeight: 0,
|
||||
width: '100%'
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {files: [], height: props.height}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.doc = this.iframe.contentDocument
|
||||
const files = JSON.parse(document.body.dataset.files || '[]')
|
||||
// eslint-disable-next-line react/no-did-mount-set-state
|
||||
this.setState({loaded: false, files})
|
||||
this.iframe.addEventListener('load', () => {
|
||||
this.setState({loaded: true})
|
||||
})
|
||||
}
|
||||
|
||||
getHead() {
|
||||
const {files} = this.state
|
||||
return files
|
||||
? files
|
||||
.filter(file => file.endsWith('.css'))
|
||||
.map(file => <link rel="stylesheet" href={`${assetPrefix}/_next/${file}`} key={file} />)
|
||||
: null
|
||||
}
|
||||
|
||||
getBody(children) {
|
||||
return (
|
||||
<Measure bounds onResize={rect => this.setHeight(rect.bounds.height)}>
|
||||
{({measureRef}) => (
|
||||
<div ref={measureRef} style={{overflow: 'auto'}}>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</Measure>
|
||||
)
|
||||
}
|
||||
|
||||
setHeight(height) {
|
||||
// console.warn('height:', height)
|
||||
this.setState({height})
|
||||
}
|
||||
|
||||
render() {
|
||||
const {children, ...rest} = this.props
|
||||
const {height = 'auto'} = this.state
|
||||
return (
|
||||
<BorderBox as="iframe" style={{height}} {...rest} ref={node => (this.iframe = node)}>
|
||||
{this.doc
|
||||
? [
|
||||
ReactDOM.createPortal(this.getHead(), this.doc.head),
|
||||
ReactDOM.createPortal(this.getBody(children), this.doc.body)
|
||||
]
|
||||
: null}
|
||||
</BorderBox>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,58 +0,0 @@
|
||||
import React from 'react'
|
||||
import {withRouter} from 'next/router'
|
||||
import Octicon, {MarkGithub} from '@githubprimer/octicons-react'
|
||||
import {Text, Flex, Sticky, BorderBox, Box} from '@primer/components'
|
||||
import BoxShadow from './BoxShadow'
|
||||
import Link from './Link'
|
||||
import NodeLink from './NodeLink'
|
||||
|
||||
const NavLink = withRouter(({is: Tag = NodeLink, href, router, ...rest}) => (
|
||||
<Tag href={href} color="white" px={4} fontWeight={router.pathname === href ? 'bold' : null} {...rest} />
|
||||
))
|
||||
|
||||
const HeaderText = props => <Text fontSize={2} {...props} />
|
||||
|
||||
const Header = props => (
|
||||
<Sticky zIndex={100}>
|
||||
<BoxShadow py={3} bg="gray.9" color="white" {...props}>
|
||||
<Flex className="p-responsive" alignItems="center" justifyContent="space-between">
|
||||
<Link href="/css" color="white" ml={3}>
|
||||
<Flex alignItems="center" justifyContent="center">
|
||||
<Octicon icon={MarkGithub} size="medium" />
|
||||
<HeaderText ml={3}>Primer CSS</HeaderText>
|
||||
</Flex>
|
||||
</Link>
|
||||
<Box display={['none', 'none', 'block']}>
|
||||
<HeaderText>
|
||||
<NavLink href="/css">Docs</NavLink>
|
||||
<NavLink href="/css/getting-started" />
|
||||
<NavLink href="/css/principles" />
|
||||
<NavLink href="/css/tools" />
|
||||
<NavLink is={Link} href="https://github.com/primer/primer/releases">
|
||||
Releases
|
||||
</NavLink>
|
||||
</HeaderText>
|
||||
</Box>
|
||||
<Box display={['block', 'block', 'none']}>
|
||||
<Link href="#sidenav">
|
||||
<BorderBox
|
||||
border={1}
|
||||
borderColor="gray.6"
|
||||
borderRadius={3}
|
||||
color="white"
|
||||
display="inline-block"
|
||||
px="12px"
|
||||
py="6px"
|
||||
>
|
||||
<Text fontWeight="bold" fontSize={1}>
|
||||
Menu
|
||||
</Text>
|
||||
</BorderBox>
|
||||
</Link>
|
||||
</Box>
|
||||
</Flex>
|
||||
</BoxShadow>
|
||||
</Sticky>
|
||||
)
|
||||
|
||||
export default Header
|
||||
11
docs/Link.js
11
docs/Link.js
@ -1,11 +0,0 @@
|
||||
import React from 'react'
|
||||
import NextLink from 'next/link'
|
||||
import {Link as PrimerLink} from '@primer/components'
|
||||
|
||||
export default function Link({href, ...rest}) {
|
||||
return (
|
||||
<NextLink href={href}>
|
||||
<PrimerLink href={href} {...rest} />
|
||||
</NextLink>
|
||||
)
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
import React from 'react'
|
||||
import Link from './Link'
|
||||
import {rootPage} from './utils'
|
||||
|
||||
/**
|
||||
* The NodeLink component takes an `href` and optional `children`.
|
||||
* If no `children` are provided, we look up the "node" of the corresponding
|
||||
* page in the tree (the one whose `path` matches the given `href`) and use
|
||||
* that node's `meta.title` if it's set. In other words, given the following
|
||||
* pages/foo/bar.md:
|
||||
*
|
||||
* ```md
|
||||
* ---
|
||||
* title: Foo Bar
|
||||
* ---
|
||||
* ```
|
||||
*
|
||||
* The following instance of NodeLink should render a link to "/foo/bar" with
|
||||
* "Foo Bar" as its text:
|
||||
*
|
||||
* ```jsx
|
||||
* <NodeLink href="/foo/bar" />
|
||||
* ```
|
||||
*/
|
||||
export default function NodeLink(props) {
|
||||
const {href, children: content} = props
|
||||
if (content) {
|
||||
return <Link {...props} />
|
||||
}
|
||||
const node = rootPage.first(node => node.path === href)
|
||||
const children = (node ? node.meta.title : null) || href
|
||||
return <Link {...props}>{children}</Link>
|
||||
}
|
||||
@ -4,7 +4,7 @@ import {Box} from '@primer/components'
|
||||
export default function Outline({outline, ...rest}) {
|
||||
if (outline && outline.length) {
|
||||
return (
|
||||
<Box is="details" mb={4}>
|
||||
<Box as="details" mb={4}>
|
||||
<summary>Table of contents</summary>
|
||||
<OutlineList items={outline} {...rest} />
|
||||
</Box>
|
||||
|
||||
@ -38,8 +38,8 @@ export default function PackageHeader(props) {
|
||||
|
||||
return (
|
||||
<Flex justifyContent="space-between" mb={4} {...rest}>
|
||||
<Text is="div" fontSize={1}>
|
||||
{status ? <StatusLabel status={status} is="a" href="/css/status-key" mr={2} /> : null}
|
||||
<Text as="div" fontSize={1}>
|
||||
{status ? <StatusLabel status={status} as="a" href="/blueprints/status-key" mr={2} /> : null}
|
||||
{info}
|
||||
</Text>
|
||||
<Box>
|
||||
|
||||
154
docs/SideNav.js
154
docs/SideNav.js
@ -1,154 +0,0 @@
|
||||
import React from 'react'
|
||||
import {join} from 'path'
|
||||
import {withRouter} from 'next/router'
|
||||
import {Box, BorderBox, Flex, Relative} from '@primer/components'
|
||||
import NodeLink from './NodeLink'
|
||||
import {rootPage} from './utils'
|
||||
|
||||
export default function SideNav(props) {
|
||||
return (
|
||||
<Relative is="nav">
|
||||
<Box id="sidenav" {...props}>
|
||||
<Flex flexDirection="column" alignItems="start">
|
||||
<Router>
|
||||
<Section path="/css/getting-started" />
|
||||
<Section path="/css/principles" />
|
||||
<Section path="/css/tools" />
|
||||
<Section path="/css/whats-new" />
|
||||
<RouteMatch path="/css">
|
||||
<Section>
|
||||
<SectionLink href="status-key" />
|
||||
</Section>
|
||||
<Section path="support" />
|
||||
<Section path="utilities" />
|
||||
<Section path="objects" />
|
||||
<Section path="components" />
|
||||
</RouteMatch>
|
||||
</Router>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Relative>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* A <Section> gets a `path` and optional children. If it has children it will
|
||||
* render those and prepend each child's `href` prop with the provided `path`.
|
||||
* This means that you can do:
|
||||
*
|
||||
* ```jsx
|
||||
* <Section path="/section">
|
||||
* <Link href="foo">Links to /section/foo</Link>
|
||||
* </Section>
|
||||
* ```
|
||||
*
|
||||
* If no children are provided, it renders a <NavList> with the provided
|
||||
* `path`.
|
||||
*/
|
||||
const Section = ({path, children}) => (
|
||||
<BorderBox p={5} border={0} borderBottom={1} borderRadius={0} width="100%">
|
||||
{children && path ? React.Children.map(children, child => addPath(child, path)) : <NavList path={path} />}
|
||||
</BorderBox>
|
||||
)
|
||||
|
||||
/**
|
||||
* A <NavList> renders a <SectionLink> for the given `path` and looks up the
|
||||
* path in the page tree. If a node is found, it renders a <NavLink> for each
|
||||
* of the node's children.
|
||||
*/
|
||||
function NavList({path}) {
|
||||
const node = rootPage.first(node => node.path === path)
|
||||
const children = node ? node.children.sort(nodeSort) : []
|
||||
return (
|
||||
<>
|
||||
<SectionLink href={path} mb={3} />
|
||||
{children.map(child => (
|
||||
<NavLink href={child.path} key={child.path} />
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* A <SectionLink> is really just a <NodeLink> that's bold when its `href`
|
||||
* matches the current path, wrapped in a <Box> for whitespace.
|
||||
*/
|
||||
const SectionLink = withRouter(({href, router, ...rest}) => (
|
||||
<Box {...rest}>
|
||||
<NodeLink href={href} color="gray.9" fontSize={2} fontWeight={router.pathname.startsWith(href) ? 'bold' : null} />
|
||||
</Box>
|
||||
))
|
||||
|
||||
/**
|
||||
* A <NavLink> is a <NodeLink> that turns black when its `href` matches the
|
||||
* current path, wrapped in a <Box> for whitespace.
|
||||
*/
|
||||
const NavLink = withRouter(({href, router, ...rest}) => {
|
||||
return (
|
||||
<Box mt={2}>
|
||||
<NodeLink href={href} color={router.pathname === href ? 'black' : undefined} fontSize={1} {...rest} />
|
||||
</Box>
|
||||
)
|
||||
})
|
||||
|
||||
/**
|
||||
* This inspired React Router's <Router> component, in that it looks for
|
||||
* children with the `path` prop and only renders the _first_ one that matches
|
||||
* the beginning of the current path. Children without a `path` prop are always
|
||||
* rendered.
|
||||
*/
|
||||
const Router = withRouter(({router, children}) => {
|
||||
let matched = false
|
||||
return React.Children.toArray(children).map(child => {
|
||||
if (child.props.path) {
|
||||
if (!matched && router.pathname.indexOf(child.props.path) === 0) {
|
||||
return (matched = child)
|
||||
}
|
||||
} else {
|
||||
return child
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* <RouteMatch> is just a way to conditionally render content without a wrapper
|
||||
* element when contained directly in a <Router>:
|
||||
*
|
||||
* ```jsx
|
||||
* <Router>
|
||||
* <RouteMatch path="/some/dir">
|
||||
* this will only show up on pages whose path begins with "/some/dir"
|
||||
* </RouteMatch>
|
||||
* </Router>
|
||||
* ```
|
||||
*/
|
||||
function RouteMatch({path, children}) {
|
||||
return path ? React.Children.map(children, child => addPath(child, path)) : children
|
||||
}
|
||||
|
||||
function sortCompare(a, b, get) {
|
||||
const aa = get(a)
|
||||
const bb = get(b)
|
||||
return typeof aa === 'string' && typeof bb === 'string' ? aa.localeCompare(bb) : undefined
|
||||
}
|
||||
|
||||
function nodeSort(a, b) {
|
||||
return sortCompare(a, b, node => node.meta.sort_title || node.meta.title)
|
||||
}
|
||||
|
||||
function addPath(el, path) {
|
||||
// if there's no path, just return the element
|
||||
if (!path) return el
|
||||
|
||||
// if this is a link it'll have an "href"; otherwise, add "path"
|
||||
const prop = el.props.href ? 'href' : 'path'
|
||||
const value = el.props[prop]
|
||||
const props = {}
|
||||
// if there's a value and it's not absolute, prefix it with the path
|
||||
if (value && !value.match(/^(\/|https?:)/)) {
|
||||
props[prop] = join(path, value)
|
||||
} else {
|
||||
props[prop] = path
|
||||
}
|
||||
return React.cloneElement(el, props)
|
||||
}
|
||||
@ -1,8 +1,2 @@
|
||||
export {default as BoxShadow} from './BoxShadow'
|
||||
// export {default as ClipboardCopy} from './ClipboardCopy'
|
||||
export {default as CodeExample} from './CodeExample'
|
||||
export {default as Header} from './Header'
|
||||
export {default as Link} from './Link'
|
||||
export {default as NodeLink} from './NodeLink'
|
||||
export {default as PackageHeader} from './PackageHeader'
|
||||
export {default as SideNav} from './SideNav'
|
||||
export {default as StatusLabel} from './StatusLabel'
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export const WCAG_AA = 4.5
|
||||
export const WCAG_AAA = 7
|
||||
export const MIN_CONTRAST_RATIO = WCAG_AAA
|
||||
import {themeGet, get as getKey} from 'styled-system'
|
||||
import {theme} from '@primer/components'
|
||||
|
||||
export const get = key => themeGet(key, getKey(theme, key))
|
||||
|
||||
export const CONTENT_MAX_WIDTH = 1012
|
||||
|
||||
@ -10,7 +10,7 @@ import ColorImage from './ColorImage.svg'
|
||||
|
||||
export {default as PrimerCSSAnimation} from './PrimerCSSAnimation.js'
|
||||
|
||||
const OverviewTitle = props => <Heading fontSize={3} fontWeight="normal" is="div" {...props} />
|
||||
const OverviewTitle = props => <Heading fontSize={3} fontWeight="normal" as="div" {...props} />
|
||||
const OverviewText = props => <Text fontSize={1} {...props} />
|
||||
|
||||
export function StylesOverview(props) {
|
||||
@ -34,7 +34,7 @@ export function StylesOverview(props) {
|
||||
return (
|
||||
<Flex {...props}>
|
||||
{styleTypes.map(({name, desc, image}) => (
|
||||
<Flex.Item is={Text} textAlign="center" mx={4} key={name}>
|
||||
<Flex.Item as={Text} textAlign="center" mx={4} key={name}>
|
||||
<Image src={image} height={90} mb={2} />
|
||||
<OverviewTitle>{name}</OverviewTitle>
|
||||
<OverviewText>{desc}</OverviewText>
|
||||
@ -103,9 +103,9 @@ function Image(props) {
|
||||
const {src, ...rest} = props
|
||||
switch (typeof src) {
|
||||
case 'string':
|
||||
return <Box is="img" width="100%" alt="" {...props} />
|
||||
return <Box as="img" width="100%" alt="" {...props} />
|
||||
case 'function':
|
||||
return <Box is={src} {...rest} />
|
||||
return <Box as={src} {...rest} />
|
||||
default:
|
||||
throw new Error(`Unrecognized Image.src type: "${typeof src}"`)
|
||||
}
|
||||
@ -123,7 +123,7 @@ export function PrimerPackageBox({count, ...rest}) {
|
||||
</Text>
|
||||
</Flex>
|
||||
{count ? (
|
||||
<Text is="div" textAlign="center">
|
||||
<Text as="div" textAlign="center">
|
||||
This package includes all {count} Primer modules.
|
||||
</Text>
|
||||
) : null}
|
||||
@ -140,17 +140,17 @@ export function MetaPackageBox({children, meta = {}, title, ...rest}) {
|
||||
const {name, imports = []} = meta
|
||||
const bundles = imports.filter(bundle => !/support/.test(bundle))
|
||||
return (
|
||||
<Flex.Item is={BorderBox} bg="white" maxWidth={220} {...rest}>
|
||||
<Flex.Item as={BorderBox} bg="white" maxWidth={220} {...rest}>
|
||||
<BorderBox bg="gray.1" border={0} borderBottom={1} borderRadius={0} px={3} py={2}>
|
||||
<Heading is="div" fontSize={2}>
|
||||
<Heading as="div" fontSize={2}>
|
||||
<Link href={bundleSourceURL(name)} color="inherit">
|
||||
{title}
|
||||
</Link>
|
||||
</Heading>
|
||||
</BorderBox>
|
||||
<Text is="div" fontSize={1} p={3}>
|
||||
<Text as="div" fontSize={1} p={3}>
|
||||
{children}
|
||||
<Text is="div" fontWeight="bold" mt={4} mb={2}>
|
||||
<Text as="div" fontWeight="bold" mt={4} mb={2}>
|
||||
{bundles.length} bundles:
|
||||
</Text>
|
||||
<ul className="list-style-none pl-0">
|
||||
|
||||
@ -1,15 +1,24 @@
|
||||
import React from 'react'
|
||||
import {Heading, Link} from '@primer/components'
|
||||
import CodeExample from './CodeExample'
|
||||
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(page = {}) {
|
||||
const {outline: getOutline = () => []} = page
|
||||
|
||||
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
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
import Router from 'next/router'
|
||||
|
||||
/**
|
||||
* Export this as your default from a page, and it'll redirect both server-
|
||||
* and client-side:
|
||||
*
|
||||
* ```js
|
||||
* import {redirect} from '../docs/utils'
|
||||
* export default redirect('/some/path')
|
||||
* ```
|
||||
*/
|
||||
export default function redirect(uri, status = 303) {
|
||||
// XXX this doesn't need to extend React.Component because
|
||||
// it doesn't "do" anything React-y
|
||||
return class {
|
||||
static getInitialProps({res}) {
|
||||
// the "context" object passed to getInitialProps() will
|
||||
// have a "res" (response) object if we're server-side
|
||||
if (res) {
|
||||
res.writeHead(status, {Location: uri})
|
||||
res.end()
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
Router.replace(uri)
|
||||
return null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function redirectTrailingSlash(context, status = 301) {
|
||||
const {
|
||||
req: {url},
|
||||
res
|
||||
} = context
|
||||
if (url.endsWith('/')) {
|
||||
const withoutSlash = url.substr(0, url.length - 1)
|
||||
res.writeHead(status, {Location: withoutSlash})
|
||||
res.end()
|
||||
return true
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react'
|
||||
import getConfig from 'next/config'
|
||||
import TreeModel from 'tree-model'
|
||||
import {join} from 'path'
|
||||
|
||||
export const CommonStyles = () => {
|
||||
const sheets = [getAssetPath('github/styleguide.css')]
|
||||
@ -85,3 +86,30 @@ function nest(map) {
|
||||
|
||||
return root
|
||||
}
|
||||
|
||||
export function sortCompare(a, b, get) {
|
||||
const aa = get(a)
|
||||
const bb = get(b)
|
||||
return typeof aa === 'string' && typeof bb === 'string' ? aa.localeCompare(bb) : undefined
|
||||
}
|
||||
|
||||
export function nodeSort(a, b) {
|
||||
return sortCompare(a, b, node => node.meta.sort_title || node.meta.title)
|
||||
}
|
||||
|
||||
export function addPath(el, path) {
|
||||
// if there's no path, just return the element
|
||||
if (!path) return el
|
||||
|
||||
// if this is a link it'll have an "href"; otherwise, add "path"
|
||||
const prop = el.props.href ? 'href' : 'path'
|
||||
const value = el.props[prop]
|
||||
const props = {}
|
||||
// if there's a value and it's not absolute, prefix it with the path
|
||||
if (value && !value.match(/^(\/|https?:)/)) {
|
||||
props[prop] = join(path, value)
|
||||
} else {
|
||||
props[prop] = path
|
||||
}
|
||||
return React.cloneElement(el, props)
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@ module.exports = (nextConfig = {}) => {
|
||||
|
||||
config.module.rules.push({
|
||||
test: /\.mdx?$/,
|
||||
use: [options.defaultLoaders.babel, require.resolve('./mdx-loader')]
|
||||
use: [options.defaultLoaders.babel, require.resolve('./mdx-loader'), require.resolve('./search-loader')]
|
||||
})
|
||||
|
||||
if (typeof nextConfig.webpack === 'function') {
|
||||
|
||||
@ -37,12 +37,11 @@ module.exports = async function(source) {
|
||||
return callback(err)
|
||||
}
|
||||
|
||||
return callback(
|
||||
null,
|
||||
`
|
||||
const code = `
|
||||
import React from 'react'
|
||||
import {MDXTag} from '@mdx-js/tag'
|
||||
${result}
|
||||
`
|
||||
)
|
||||
|
||||
return callback(null, code)
|
||||
}
|
||||
|
||||
13
lib/search-loader.js
Normal file
13
lib/search-loader.js
Normal file
@ -0,0 +1,13 @@
|
||||
const grayMatter = require('gray-matter')
|
||||
const fs = require('fs')
|
||||
const {join} = require('path')
|
||||
|
||||
const searchIndex = {}
|
||||
const searchIndexPath = join(process.cwd(), 'searchIndex.js')
|
||||
|
||||
module.exports = function(source) {
|
||||
const {data, content} = grayMatter(source)
|
||||
searchIndex[data.path] = Object.assign({title: data.title, path: data.path, keywords: data.keywords}, {content})
|
||||
fs.writeFileSync(searchIndexPath, `export default ${JSON.stringify(searchIndex, null, 2)}`, 'utf8')
|
||||
return source
|
||||
}
|
||||
@ -1,14 +1,18 @@
|
||||
const {join, resolve} = require('path')
|
||||
const withNextPages = require('@primer/next-pages/plugin')
|
||||
const withSass = require('@zeit/next-sass')
|
||||
const configure = require('./lib/config')
|
||||
|
||||
module.exports = configure(
|
||||
withSass({
|
||||
sassLoaderOptions: {
|
||||
includePaths: [
|
||||
resolve(__dirname, '../modules'),
|
||||
resolve(__dirname, 'node_modules')
|
||||
]
|
||||
}
|
||||
})
|
||||
withNextPages(
|
||||
withSass({
|
||||
sassLoaderOptions: {
|
||||
includePaths: [
|
||||
resolve(__dirname, '../modules'),
|
||||
resolve(__dirname, 'node_modules')
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
)
|
||||
)
|
||||
|
||||
20177
package-lock.json
generated
20177
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
23
package.json
23
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@primer/css",
|
||||
"version": "12.2.0",
|
||||
"version": "12.3.1",
|
||||
"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,9 +47,11 @@
|
||||
"@githubprimer/octicons-react": "^8.1.3",
|
||||
"@mdx-js/mdx": "^0.16.6",
|
||||
"@mdx-js/tag": "0.15.0",
|
||||
"@primer/components": "11.0.0",
|
||||
"@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",
|
||||
@ -63,11 +65,12 @@
|
||||
"code-blocks": "^1.1.0",
|
||||
"colorette": "^1.0.7",
|
||||
"css-loader": "^0.28.4",
|
||||
"cssstats": "3.2.0",
|
||||
"cssstats": "3.3.0",
|
||||
"details-dialog-element": "^1.4.0",
|
||||
"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",
|
||||
@ -75,7 +78,7 @@
|
||||
"gray-matter": "^4.0.1",
|
||||
"hast-util-to-html": "^5.0.0",
|
||||
"hast-util-to-string": "^1.0.1",
|
||||
"html-2-jsx": "^0.5.1-dev",
|
||||
"html-2-jsx": "0.5.1-dev",
|
||||
"html-to-react": "^1.2.11",
|
||||
"klaw": "3.0.0",
|
||||
"loader-utils": "^1.1.0",
|
||||
@ -84,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",
|
||||
@ -96,9 +101,9 @@
|
||||
"prism-github": "^1.1.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"raw-loader": "^0.5.1",
|
||||
"react": "16.6.1",
|
||||
"react": "16.8.1",
|
||||
"react-bodymovin": "2.0.0",
|
||||
"react-dom": "16.6.1",
|
||||
"react-dom": "16.8.1",
|
||||
"react-live": "1.12.0",
|
||||
"react-measure": "^2.2.2",
|
||||
"refractor": "^2.6.2",
|
||||
@ -113,7 +118,9 @@
|
||||
"style-loader": "^0.18.2",
|
||||
"styled-components": "4.1.2",
|
||||
"stylelint": "9.10.1",
|
||||
"stylelint-config-primer": "4.0.0",
|
||||
"stylelint-config-primer": "7.0.0",
|
||||
"table": "5.2.3",
|
||||
"tar": "4.4.8",
|
||||
"title-case": "^2.1.1",
|
||||
"tree-model": "^1.0.7",
|
||||
"typographic-base": "^1.0.4",
|
||||
|
||||
@ -2,14 +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 {Header, PackageHeader, SideNav} from '../docs/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, 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 = {}
|
||||
@ -25,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
|
||||
@ -38,7 +46,15 @@ export default class MyApp extends App {
|
||||
<Head>
|
||||
<title>Primer CSS{meta.title ? ` / ${meta.title}` : null}</title>
|
||||
</Head>
|
||||
<Header />
|
||||
<Header
|
||||
documents={documents}
|
||||
root="https://primer.style"
|
||||
subfolder="css"
|
||||
title="Primer"
|
||||
subtitle="CSS"
|
||||
>
|
||||
<JumpNav />
|
||||
</Header>
|
||||
<Flex
|
||||
flexDirection={['column', 'column', 'column', 'row-reverse']}
|
||||
alignContent="stretch"
|
||||
@ -48,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} />
|
||||
@ -59,8 +75,18 @@ 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>
|
||||
{/* TODO: bring back edit link! */}
|
||||
</Box>
|
||||
</Box>
|
||||
<BorderBox
|
||||
@ -73,7 +99,15 @@ export default class MyApp extends App {
|
||||
borderRight={1}
|
||||
borderTop={[1, 1, 0, 0]}
|
||||
>
|
||||
<SideNav />
|
||||
<SideNav>
|
||||
<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>
|
||||
</Container>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import {Heading} from '@primer/components'
|
||||
import {redirectTrailingSlash} from '../docs/redirect'
|
||||
import {redirectTrailingSlash} from '@primer/blueprints/next-components'
|
||||
|
||||
export default class extends React.Component {
|
||||
static getInitialProps(context) {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Box overlay
|
||||
path: components/box-overlay
|
||||
status: Experimental
|
||||
status_issue: 'https://github.com/github/design-systems/issues/374'
|
||||
source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/box-overlay.scss'
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Boxed groups
|
||||
path: components/boxed-group
|
||||
status: Deprecated
|
||||
source: 'https://github.com/github/github/blob/master/app/assets/stylesheets/components/boxed-groups.scss'
|
||||
symbols: [BtnGroup, Counter, ajax-error-message, approved, avatar, bleed-flush, boxed-action, boxed-group, boxed-group-action, boxed-group-breadcrumb, boxed-group-inner, boxed-group-list, boxed-group-standalone, boxed-group-table, boxed-group-warning, btn-sm, compact, compact-options, condensed, dangerzone, dashboard-sidebar, field-with-errors, flush, heading, help, inline-error, markdown-body, octicon, octicon-alert, one-half, rejected, seamless, selected, spinner, standalone, tabnav, tabnav-tab, visible]
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Dropdown
|
||||
path: components/dropdown
|
||||
status: Stable
|
||||
source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/dropdown.scss'
|
||||
symbols: [active, anim-scale-in, btn-link, dropdown, dropdown-caret, dropdown-divider, dropdown-header, dropdown-item, dropdown-menu, dropdown-menu-content, dropdown-menu-e, dropdown-menu-ne, dropdown-menu-no-overflow, dropdown-menu-s, dropdown-menu-se, dropdown-menu-sw, dropdown-menu-w, dropdown-signout, octicon, zeroclipboard-is-hover]
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Flash banner
|
||||
path: components/flash-banner
|
||||
status: In review
|
||||
status_issue: 'https://github.com/github/design-systems/issues/99'
|
||||
source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/flash-banner.scss'
|
||||
|
||||
@ -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>
|
||||
@ -205,7 +205,7 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
|
||||
Convey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class="form-group">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.
|
||||
|
||||
```html
|
||||
<form>
|
||||
<form class="pb-2">
|
||||
<dl class="form-group errored">
|
||||
<dt><label for="example-text-errored">Example Text</label></dt>
|
||||
<dd><input class="form-control" type="text" value="Example Value" id="example-text-errored" aria-describedby="form-error-text"></dd>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Components
|
||||
path: components/index
|
||||
---
|
||||
|
||||
Components make it easier to mark up a set of elements that are commonly grouped together with similar visual styles. Their base styles are shared and variants are added with modifier classes, so usually components are comprised of multiple classes. Most importantly, components should be highly reusable across the site, rather than built for specific pages or features. To achieve this:
|
||||
|
||||
@ -138,5 +138,3 @@ Counters can also be used in `Box` headers to indicate the number of items in a
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
{:toc}
|
||||
|
||||
@ -317,5 +317,3 @@ You can also use a `subnav-search-context` to display search help in a select me
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Pagehead
|
||||
path: components/pagehead
|
||||
status: Stable
|
||||
internal: true
|
||||
source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/pagehead.scss'
|
||||
|
||||
@ -51,7 +51,7 @@ Defaults to caret oriented top-center.
|
||||
```html title="Default (top-center)"
|
||||
<div class="position-relative text-center">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0 left-0">
|
||||
<div class="Popover right-0 left-0 position-relative">
|
||||
<div class="Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
@ -66,7 +66,7 @@ Defaults to caret oriented top-center.
|
||||
```html title="Large"
|
||||
<div class="position-relative text-center">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0 left-0">
|
||||
<div class="Popover right-0 left-0 position-relative">
|
||||
<div class="Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
@ -94,7 +94,7 @@ Defaults to caret oriented top-center.
|
||||
### Bottom-right
|
||||
|
||||
```html title="Bottom-right"
|
||||
<div class="position-relative text-right">
|
||||
<div class="position-relative text-right pr-2">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
@ -109,14 +109,14 @@ Defaults to caret oriented top-center.
|
||||
### Bottom-left
|
||||
|
||||
```html title="Bottom-left"
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover position-relative pl-2">
|
||||
<div class="Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
<button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
|
||||
</div>
|
||||
<button class="btn btn-primary">UI</button>
|
||||
</div>
|
||||
<button class="btn btn-primary">UI</button>
|
||||
```
|
||||
|
||||
### Left
|
||||
@ -212,9 +212,9 @@ Defaults to caret oriented top-center.
|
||||
### Top-left
|
||||
|
||||
```html title="Top-left"
|
||||
<div class="position-relative">
|
||||
<div class="position-relative pl-2">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover">
|
||||
<div class="Popover position-relative">
|
||||
<div class="Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
@ -227,9 +227,9 @@ Defaults to caret oriented top-center.
|
||||
### Top-right
|
||||
|
||||
```html title="Top-right"
|
||||
<div class="position-relative text-right">
|
||||
<div class="position-relative text-right pr-2">
|
||||
<button class="btn btn-primary">UI</button>
|
||||
<div class="Popover right-0">
|
||||
<div class="Popover right-0 position-relative">
|
||||
<div class="Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large">
|
||||
<h4 class="mb-2">Popover heading</h4>
|
||||
<p>Message about this particular piece of UI.</p>
|
||||
@ -238,4 +238,3 @@ Defaults to caret oriented top-center.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@ -7,50 +7,62 @@ bundle: progress
|
||||
---
|
||||
|
||||
|
||||
Use Progress components to visualize task completion.
|
||||
|
||||
## Default Progress
|
||||
Use Progress components to visualize task completion. The `Progress` class adds a background color and aligns its children horizontally with flexbox. The children should be individually colored with [background utilities](/css/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped.
|
||||
|
||||
```html
|
||||
<span class="Progress">
|
||||
<span class="Progress-value bg-green" style="width: 50%;"></span>
|
||||
<span class="bg-green" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
## Large Progress
|
||||
Large progress bars are slightly taller than the default.
|
||||
|
||||
```html
|
||||
<span class="Progress Progress--large">
|
||||
<span class="Progress-value bg-green" style="width: 50%;"></span>
|
||||
<span class="bg-green" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
## Small Progress
|
||||
Large progress bars are shorter than the default.
|
||||
|
||||
```html
|
||||
<span class="Progress Progress--small">
|
||||
<span class="Progress-value bg-green" style="width: 50%;"></span>
|
||||
<span class="bg-green" style="width: 50%;"></span>
|
||||
</span>
|
||||
```
|
||||
|
||||
## Progress with tooltip
|
||||
## Inline Progress
|
||||
For inline progress indicators, use the `Progress` and `d-inline-flex` with an inline element such as `<span>` and add a custom `width` style:
|
||||
|
||||
```html
|
||||
<div class="tooltipped tooltipped-n" aria-label="78 done / 6 in progress / 2 to do">
|
||||
<span class="text-small text-gray mr-2">4 of 16</span>
|
||||
<span class="Progress d-inline-flex" style="width: 160px">
|
||||
<div class="bg-green" style="width: 25%"></div>
|
||||
</span>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
In cases where it's not possible to describe the progress in text, provide an `aria-label` attribute that does so:
|
||||
|
||||
```html
|
||||
<div aria-label="tasks: 8 of 10 complete">
|
||||
<span class="Progress">
|
||||
<span class="Progress-value bg-green" style="width: 50%;"></span>
|
||||
<span class="bg-green" style="width: 80%;"></span>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Progress with multiple values
|
||||
To show the progress of tasks in multiple states (such as "done", "in progress", and "open"), use distinct background color utilities and give each one a percentage width proportional to the total number. Children are stacked from left to right, so if your widths add up to 100%, your bars will too.
|
||||
|
||||
```html
|
||||
<div class="tooltipped tooltipped-n" aria-label="78 done / 6 in progress / 2 to do">
|
||||
<div class="tooltipped tooltipped-n" aria-label="tasks: 80 done, 14 in progress, 6 open">
|
||||
<span class="Progress">
|
||||
<span class="Progress-value bg-green" style="width: 50%;"></span>
|
||||
<span class="Progress-value bg-purple" style="width: 25%;"></span>
|
||||
<span class="Progress-value bg-red" style="width: 5%;"></span>
|
||||
<span class="bg-green" style="width: 80%;"></span>
|
||||
<span class="bg-purple" style="width: 14%;"></span>
|
||||
<span class="bg-red" style="width: 6%;"></span>
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Select menu
|
||||
path: components/select-menu
|
||||
status: Stable
|
||||
source: 'https://github.com/github/github/blob/master/docs/styleguide/css/styles/product/components/select-menu.md'
|
||||
symbols: [active, close-button, css-truncate-target, description, description-inline, description-warning, disabled, filterable-empty, has-error, hidden-select-button-text, icon-only, indeterminate, is-loading, is-showing-new-item-form, label-select-menu, last-visible, menu-active, modal-backdrop, navigation-focus, octicon, octicon-check, octicon-dash, octicon-octoface, octicon-x, opaque, primary, select-menu, select-menu-action, select-menu-blankslate, select-menu-button, select-menu-button-gravatar, select-menu-button-large, select-menu-clear-item, select-menu-divider, select-menu-error, select-menu-filters, select-menu-header, select-menu-item, select-menu-item-gravatar, select-menu-item-heading, select-menu-item-icon, select-menu-item-parent, select-menu-item-template, select-menu-item-text, select-menu-list, select-menu-loading-overlay, select-menu-modal, select-menu-modal-holder, select-menu-modal-narrow, select-menu-modal-right, select-menu-new-item-form, select-menu-no-results, select-menu-tab, select-menu-tab-bucket, select-menu-tab-nav, select-menu-tabs, select-menu-text-filter, select-menu-title, selected, spinner]
|
||||
|
||||
@ -24,71 +24,75 @@ Before adding a tooltip, please consider: Is this information essential and nece
|
||||
## Tooltip direction
|
||||
Specify the direction of a tooltip with north, south, east, and west directions:
|
||||
|
||||
- `.tooltipped-n`
|
||||
- `.tooltipped-ne`
|
||||
- `.tooltipped-e`
|
||||
- `.tooltipped-se`
|
||||
- `.tooltipped-s`
|
||||
- `.tooltipped-sw`
|
||||
- `.tooltipped-w`
|
||||
- `.tooltipped-nw`
|
||||
|
||||
|
||||
```html
|
||||
<span class="tooltipped tooltipped-n border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the North side.">
|
||||
Tooltip North
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-ne border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the North East side.">
|
||||
Tooltip North East
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-e border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the East side.">
|
||||
Tooltip East
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the South East side.">
|
||||
Tooltip South East
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-s border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the South side.">
|
||||
Tooltip South
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-sw border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the South West side.">
|
||||
Tooltip South West
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-w border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the West side.">
|
||||
Tooltip West
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-nw border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the North West side.">
|
||||
Tooltip North West
|
||||
</span>
|
||||
<div class="d-flex flex-justify-center pt-4">
|
||||
<span class="tooltipped tooltipped-nw m-2 p-2 border" aria-label="This is the tooltip on the North West side.">
|
||||
.tooltipped-nw
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-n m-2 p-2 border" aria-label="This is the tooltip on the North side.">
|
||||
.tooltipped-n
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-ne m-2 p-2 border" aria-label="This is the tooltip on the North East side.">
|
||||
.tooltipped-ne
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center">
|
||||
<span class="tooltipped tooltipped-w m-2 p-2 border" aria-label="This is the tooltip on the West side.">
|
||||
.tooltipped-w
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-e m-2 p-2 border" aria-label="This is the tooltip on the East side.">
|
||||
.tooltipped-e
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center pb-4">
|
||||
<span class="tooltipped tooltipped-sw m-2 p-2 border" aria-label="This is the tooltip on the South West side.">
|
||||
.tooltipped-sw
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-s m-2 p-2 border" aria-label="This is the tooltip on the South side.">
|
||||
.tooltipped-s
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se m-2 p-2 border" aria-label="This is the tooltip on the South East side.">
|
||||
.tooltipped-se
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Tooltip alignment
|
||||
Align tooltips to the left or right of an element, combined with a directional class to specify north or south.
|
||||
Align tooltips to the left or right of an element, combined with a directional class to specify north or south. Use a modifier of `1` or `2` to choose how much the tooltip's arrow is indented.
|
||||
|
||||
```html
|
||||
<span class="tooltipped tooltipped-ne tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NE and aligned left.">
|
||||
Tooltip North East align left 1
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-ne tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NE and aligned left.">
|
||||
Tooltip North East align left 2
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SW and aigned left.">
|
||||
Tooltip South East align left 1
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SW and aigned left.">
|
||||
Tooltip South East align left 2
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-nw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NW and aligned right.">
|
||||
Tooltip North West align right 1
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-nw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NW and aligned right.">
|
||||
Tooltip North West align right 2
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-sw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SE and aligned right.">
|
||||
Tooltip South West align right 1
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-sw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SE and aligned right.">
|
||||
Tooltip South West align right 2
|
||||
</span>
|
||||
<div class="d-flex flex-justify-center pt-4">
|
||||
<span class="tooltipped tooltipped-nw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
|
||||
.tooltipped-nw .tooltipped-align-right-1
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-ne tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
|
||||
.tooltipped-ne .tooltipped-align-left-1
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center">
|
||||
<span class="tooltipped tooltipped-nw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
|
||||
.tooltipped-nw .tooltipped-align-right-2
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-ne tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
|
||||
.tooltipped-ne .tooltipped-align-left-2
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center">
|
||||
<span class="tooltipped tooltipped-sw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
|
||||
.tooltipped-sw .tooltipped-align-right-1
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped SW and aigned left.">
|
||||
.tooltipped-se .tooltipped-align-left-1
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-justify-center pb-4">
|
||||
<span class="tooltipped tooltipped-sw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
|
||||
.tooltipped-sw .tooltipped-align-right-2
|
||||
</span>
|
||||
<span class="tooltipped tooltipped-se tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped SW and aigned left.">
|
||||
.tooltipped-se .tooltipped-align-left-2
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Tooltips with multiple lines
|
||||
@ -96,18 +100,21 @@ Use `.tooltipped-multiline` when you have long content. This style has some limi
|
||||
|
||||
|
||||
```html
|
||||
<span class="tooltipped tooltipped-multiline tooltipped-n border p-2" aria-label="This is the tooltip with multiple lines. This is the tooltip with multiple lines.">
|
||||
Tooltip with multiple lines
|
||||
</span>
|
||||
<div class="d-flex flex-justify-center pt-6">
|
||||
<span class="tooltipped tooltipped-n tooltipped-multiline m-2 p-2 border" aria-label="This is the tooltip with multiple lines. This is the tooltip with multiple lines.">
|
||||
.tooltipped-multiline
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Tooltips No Delay
|
||||
## Tooltips with no delay
|
||||
|
||||
By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a modifier class you can use to override this. `.tooltipped-no-delay`
|
||||
By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a `.tooltipped-no-delay` modifier class you can use to override this.
|
||||
|
||||
```html
|
||||
<span class="tooltipped tooltipped-n tooltipped-no-delay border p-2" aria-label="This is the tooltip on the no delay side.">
|
||||
Tooltip no delay
|
||||
</span>
|
||||
<div class="d-flex flex-justify-center pt-4">
|
||||
<span class="tooltipped tooltipped-n tooltipped-no-delay m-2 p-2 border" aria-label="This is the tooltip on the no delay side.">
|
||||
.tooltipped-no-delay
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Contributing
|
||||
path: getting-started/contributing
|
||||
---
|
||||
|
||||
Guidelines for contributing to GitHub's CSS.
|
||||
@ -7,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
|
||||
@ -71,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.
|
||||
|
||||
@ -170,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.
|
||||
|
||||
@ -249,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.
|
||||
|
||||
@ -1,27 +1,28 @@
|
||||
---
|
||||
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
|
||||
@ -45,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
|
||||
@ -81,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">
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
---
|
||||
title: CSS
|
||||
path: /
|
||||
---
|
||||
|
||||
import {Box, Flex, Heading, Link, Text} from '@primer/components'
|
||||
import {
|
||||
PrimerCSSAnimation,
|
||||
@ -17,10 +22,10 @@ export const Hero = () => (
|
||||
<Heading color="blue.4" fontSize={7} pb={3} m={0}>
|
||||
Primer CSS
|
||||
</Heading>
|
||||
<Text is="div" color="blue.2" fontSize={2} mb={4}>
|
||||
<Text as="div" color="blue.2" fontSize={2} mb={4}>
|
||||
v{version}
|
||||
</Text>
|
||||
<Box is={PrimerCSSAnimation} mb={6} />
|
||||
<Box as={PrimerCSSAnimation} mb={6} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
@ -38,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} />
|
||||
|
||||
@ -64,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>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Objects
|
||||
path: objects/index
|
||||
---
|
||||
|
||||
Objects help us with common layout patterns but aren't concerned with thematic styles. Examples include the table object, the grid, and the media object. Objects essentially provide some scaffolding for layouts and should be able to be used with other objects, components, and utilities.
|
||||
|
||||
@ -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`.
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Accessibility
|
||||
path: principles/accessibility
|
||||
---
|
||||
|
||||
Accessibility is everyone’s responsibility, and the purpose of this document is to provide general accessibility guidelines to developers and designers.
|
||||
@ -41,7 +42,7 @@ Only use a `div` or a `span` to markup up content when there isn't another HTML
|
||||
```
|
||||
|
||||
> More on semantic markup:
|
||||
>
|
||||
>
|
||||
> - [Semantic Structure – WebAIM](http://webaim.org/techniques/semanticstructure/)
|
||||
|
||||
### Keyboard accessibility
|
||||
@ -85,7 +86,7 @@ Be mindful when using small font size, thin font weight, low contrast colors in
|
||||
Instead of relying solely on color to communicate information, always combine color with another factor, like shape or position change. This is important because some colors can be hard to tell apart due to color blindness or weak eyesight.
|
||||
|
||||
> More on visual accessibility:
|
||||
>
|
||||
>
|
||||
> - [Use of Color – Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html)
|
||||
> - [Contrast – Understanding WCAG 2.0](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
|
||||
|
||||
@ -120,7 +121,7 @@ Use `aria-label` when there is no text.
|
||||
Navigating from a list of all the links on a given web page is very common for assistive technology users. We should make sure that the link text itself is meaningful and unique, and there should be as few duplicated references as possible.
|
||||
|
||||
> More on link responsibly:
|
||||
>
|
||||
>
|
||||
> - [Link Purpose – Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html)
|
||||
|
||||
### Dynamic content
|
||||
@ -128,7 +129,7 @@ Navigating from a list of all the links on a given web page is very common for a
|
||||
When using JavaScript to change the content on the page, always make sure that screen reader users are informed about the change. This can be done with `aria-live`, or focus management.
|
||||
|
||||
> More on dynamic content:
|
||||
>
|
||||
>
|
||||
> - [ARIA Live Regions – MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
|
||||
|
||||
### Focus management
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: HTML
|
||||
path: principles/html
|
||||
---
|
||||
|
||||
{:toc}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Principles
|
||||
path: principles/index
|
||||
---
|
||||
|
||||
The CSS styleguide enables us to create a consistent user experience across GitHub, manage CSS bloat, and make our CSS easier to maintain. These principles should serve as guidelines for how we write and use CSS.
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: SCSS
|
||||
path: priniciples/scss
|
||||
---
|
||||
|
||||
{:toc}
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
---
|
||||
title: Status key
|
||||
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 |
|
||||
| :----- | :--- |
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Color system
|
||||
path: support/color-system
|
||||
description: 'Sass variables, mixins, and functions for use in our components.'
|
||||
source: 'https://github.com/primer/primer/blob/master/modules/primer-support/lib/variables/color-system.scss'
|
||||
symbols: [gray, grey, blue, green, purple, yellow, orange, red, black, white]
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Atom packages
|
||||
path: tools/atom-packages
|
||||
---
|
||||
|
||||
[Atom editor](https://atom.io/) is a _"A hackable text editor for the 21st Century"_ built by GitHub. If you use it as your editor of choice, the design systems team has a list of packages that we find useful for CSS development.
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Docset
|
||||
path: tools/docset
|
||||
---
|
||||
|
||||
We use and ❤️ [Kapeli's Dash app][dash] for browsing API documentation. Dash comes with 150+ offline documentation sets, but doesn't have our style guide.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Tools
|
||||
path: tools/index
|
||||
---
|
||||
|
||||
Design and development tools for working with the GitHub CSS toolkit.
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Linting
|
||||
path: tools/linting
|
||||
---
|
||||
|
||||
We use linters to enforce [coding principles and standards](/css/principles). On every pull request we run the linters on the code to make sure any changes meet our standards. When a commit contains code that doesn't meet the standards, the build fails which blocks merging into master and deploying to production.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: Local development
|
||||
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
|
||||
|
||||
@ -18,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.
|
||||
|
||||
@ -26,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:**
|
||||
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
---
|
||||
title: Prototyping
|
||||
path: tools/prototyping
|
||||
---
|
||||
|
||||
You're welcome to use whatever prototyping tool suits your needs, however we've set up some options that will help you get started quickly.
|
||||
|
||||
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>
|
||||
@ -26,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.
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Sketch templates
|
||||
internal: true
|
||||
path: tools/sketch-templates
|
||||
---
|
||||
|
||||
We often use Sketch for mocking up designs before coding them. To make this process faster and to keep our designs consistent, we have created UI kits that contain many of our commonly used styles.
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Testing resources
|
||||
path: tools/testing
|
||||
---
|
||||
|
||||
At GitHub we use a staging environment called review-lab for testing with production data. Deploying a branch to [review-lab](https://github.com/github/github/blob/master/docs/deployment.md#test-in-lab-environments) for testing is one of the best ways to test your work with real production data prior to an actual production deployment.
|
||||
|
||||
@ -115,36 +115,36 @@ Use `.border-white-fade-xx` to add a white border with various levels of alpha t
|
||||
|
||||
```html
|
||||
<div class="bg-gray-dark text-white p-3 mb-3">
|
||||
<div class="border border-white-fade-15 p-2 mb-2">
|
||||
<div class="border-bottom border-white-fade-15 p-2 mb-2">
|
||||
.border-white-fade-15
|
||||
</div>
|
||||
<div class="border border-white-fade-30 p-2 mb-2">
|
||||
<div class="border-bottom border-white-fade-30 p-2 mb-2">
|
||||
.border-white-fade-30
|
||||
</div>
|
||||
<div class="border border-white-fade-50 p-2 mb-2">
|
||||
<div class="border-bottom border-white-fade-50 p-2 mb-2">
|
||||
.border-white-fade-50
|
||||
</div>
|
||||
<div class="border border-white-fade-70 p-2 mb-2">
|
||||
<div class="border-bottom border-white-fade-70 p-2 mb-2">
|
||||
.border-white-fade-70
|
||||
</div>
|
||||
<div class="border border-white-fade-85 p-2 mb-2">
|
||||
<div class="border-bottom border-white-fade-85 p-2 mb-2">
|
||||
.border-white-fade-85
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-blue text-white p-3">
|
||||
<div class="border border-white-fade-15 p-2 mb-2">
|
||||
<div class="border-bottom border-white-fade-15 p-2 mb-2">
|
||||
.border-white-fade-15
|
||||
</div>
|
||||
<div class="border border-white-fade-30 p-2 mb-2">
|
||||
<div class="border-bottom border-white-fade-30 p-2 mb-2">
|
||||
.border-white-fade-30
|
||||
</div>
|
||||
<div class="border border-white-fade-50 p-2 mb-2">
|
||||
<div class="border-bottom border-white-fade-50 p-2 mb-2">
|
||||
.border-white-fade-50
|
||||
</div>
|
||||
<div class="border border-white-fade-70 p-2 mb-2">
|
||||
<div class="border-bottom border-white-fade-70 p-2 mb-2">
|
||||
.border-white-fade-70
|
||||
</div>
|
||||
<div class="border border-white-fade-85 p-2 mb-2">
|
||||
<div class="border-bottom border-white-fade-85 p-2 mb-2">
|
||||
.border-white-fade-85
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Colors
|
||||
path: utilities/colors
|
||||
description: 'Immutable, atomic CSS classes to rapidly build product'
|
||||
status: Stable
|
||||
package:
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Utilities
|
||||
path: utilities/index
|
||||
---
|
||||
|
||||
Utilities provide the building blocks for layout and handle a range common use cases that help us avoid writing custom styles. When we need to add some margin or padding, rather than adding a new selector specific to that use case, we can use utilities. This helps us reduce the number of unique property-value pairs, and helps us keep more consistent styles across the site.
|
||||
|
||||
@ -85,10 +85,10 @@ Hide utilities are able to be applied or changed per breakpoint using the follow
|
||||
|
||||
| Shorthand | Range |
|
||||
| --- | --- |
|
||||
| -sm | 0—544px |
|
||||
| -md | 544px—768px |
|
||||
| -lg | 768px—1004px |
|
||||
| -xl | 1004px and above |
|
||||
| -sm | 0—543px |
|
||||
| -md | 544px—767px |
|
||||
| -lg | 768px—1011px |
|
||||
| -xl | 1012px and above |
|
||||
|
||||
```html
|
||||
<div>
|
||||
@ -247,11 +247,13 @@ Use `.position-absolute` to take elements out of the normal document flow.
|
||||
|
||||
Use `.position-fixed` to position an element relative to the viewport. **Be careful when using fixed positioning. It is tricky to use and can lead to unwanted side effects.**
|
||||
|
||||
_Note: fixed positioning has been disabled here for demonstration only._
|
||||
_Note: This example is shown in an `<iframe>` and therefore will not be positioned to the viewport of this page._
|
||||
|
||||
```html
|
||||
<div class="position-fixed bg-gray-light border-bottom border-gray p-3">
|
||||
.position-fixed
|
||||
<div style="height: 64px;">
|
||||
<div class="position-fixed right-0 bottom-0 bg-gray-light border p-2">
|
||||
.position-fixed
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@ -32,8 +32,8 @@ In an effort to reduce the size of our CSS, responsive breakpoints are only supp
|
||||
Using column offset classes can pull a div over X number of columns to the left. Negative offsets are available in [spacings from 1](../support/spacing/#spacing-scale) [to 7](../support/marketing-variables/).
|
||||
|
||||
```html
|
||||
<div class="clearfix">
|
||||
<div class="offset-n1 col-3 border p-3">.offset-n1</div>
|
||||
<div class="offset-n2 col-3 border p-3">.offset-n2</div>
|
||||
<div class="mx-auto border" style="width: 300px">
|
||||
<div class="offset-n1 col-4 border p-3">.offset-n1</div>
|
||||
<div class="offset-n2 col-4 border p-3">.offset-n2</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -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 '../docs/redirect'
|
||||
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
|
||||
}
|
||||
@ -9,5 +9,10 @@ if [[ -f $file ]]; then
|
||||
fi
|
||||
|
||||
if [[ "$GITHUB_REF" = "refs/heads/master" ]]; then
|
||||
npm run publish-storybook
|
||||
npm run --silent publish-storybook || (
|
||||
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
|
||||
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
border: 1px solid transparent;
|
||||
border-bottom: 0;
|
||||
|
||||
&[aria-selected=true],
|
||||
&.selected {
|
||||
color: $text-gray-dark;
|
||||
background-color: $bg-white;
|
||||
|
||||
@ -2,13 +2,12 @@
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
border-bottom: $border;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.UnderlineNav-body {
|
||||
display: flex;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.UnderlineNav-item {
|
||||
@ -18,7 +17,7 @@
|
||||
line-height: $lh-default;
|
||||
color: $text-gray;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-bottom: 2px $border-style transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
||||
@ -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;
|
||||
@ -65,6 +66,7 @@ $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;
|
||||
$text-yellow: $yellow-800 !default;
|
||||
|
||||
@ -16,39 +16,6 @@
|
||||
|
||||
.border-dashed { border-style: dashed !important; }
|
||||
|
||||
/* Use with .border to turn the border blue */
|
||||
.border-blue { border-color: $border-blue !important; }
|
||||
/* Use with .border to turn the border blue-light */
|
||||
.border-blue-light { border-color: $border-blue-light !important; }
|
||||
/* Use with .border to turn the border green */
|
||||
.border-green { border-color: $border-green !important; }
|
||||
/* Use with .border to turn the border green light */
|
||||
.border-green-light { border-color: $border-green-light !important; }
|
||||
/* Use with .border to turn the border red */
|
||||
.border-red { border-color: $border-red !important; }
|
||||
/* Use with .border to turn the border red-light */
|
||||
.border-red-light { border-color: $border-red-light !important; }
|
||||
/* Use with .border to turn the border purple */
|
||||
.border-purple { border-color: $border-purple !important; }
|
||||
/* Use with .border to turn the border yellow */
|
||||
.border-yellow { border-color: $border-yellow !important; }
|
||||
/* Use with .border to turn the border gray-light */
|
||||
.border-gray-light { border-color: $border-gray-light !important; }
|
||||
/* Use with .border to turn the border gray-dark */
|
||||
.border-gray-dark { border-color: $border-gray-dark !important; }
|
||||
|
||||
/* Use with .border to turn the border rgba black 0.15 */
|
||||
.border-black-fade { border-color: $border-black-fade !important; }
|
||||
/* Use with .border to turn the border rgba white 0.15 */
|
||||
.border-white-fade { border-color: $border-white-fade !important; }
|
||||
|
||||
/* Use with .border to turn the border white w/varying transparency */
|
||||
.border-white-fade-15 { border-color: $white-fade-15 !important; }
|
||||
.border-white-fade-30 { border-color: $white-fade-30 !important; }
|
||||
.border-white-fade-50 { border-color: $white-fade-50 !important; }
|
||||
.border-white-fade-70 { border-color: $white-fade-70 !important; }
|
||||
.border-white-fade-85 { border-color: $white-fade-85 !important; }
|
||||
|
||||
$edges: (
|
||||
top: (top-left, top-right),
|
||||
right: (top-right, bottom-right),
|
||||
@ -109,3 +76,36 @@ $edges: (
|
||||
|
||||
/* Add a 50% border-radius to make something into a circle */
|
||||
.circle { border-radius: 50% !important; }
|
||||
|
||||
/* Use with .border to turn the border blue */
|
||||
.border-blue { border-color: $border-blue !important; }
|
||||
/* Use with .border to turn the border blue-light */
|
||||
.border-blue-light { border-color: $border-blue-light !important; }
|
||||
/* Use with .border to turn the border green */
|
||||
.border-green { border-color: $border-green !important; }
|
||||
/* Use with .border to turn the border green light */
|
||||
.border-green-light { border-color: $border-green-light !important; }
|
||||
/* Use with .border to turn the border red */
|
||||
.border-red { border-color: $border-red !important; }
|
||||
/* Use with .border to turn the border red-light */
|
||||
.border-red-light { border-color: $border-red-light !important; }
|
||||
/* Use with .border to turn the border purple */
|
||||
.border-purple { border-color: $border-purple !important; }
|
||||
/* Use with .border to turn the border yellow */
|
||||
.border-yellow { border-color: $border-yellow !important; }
|
||||
/* Use with .border to turn the border gray-light */
|
||||
.border-gray-light { border-color: $border-gray-light !important; }
|
||||
/* Use with .border to turn the border gray-dark */
|
||||
.border-gray-dark { border-color: $border-gray-dark !important; }
|
||||
|
||||
/* Use with .border to turn the border rgba black 0.15 */
|
||||
.border-black-fade { border-color: $border-black-fade !important; }
|
||||
/* Use with .border to turn the border rgba white 0.15 */
|
||||
.border-white-fade { border-color: $border-white-fade !important; }
|
||||
|
||||
/* Use with .border to turn the border white w/varying transparency */
|
||||
.border-white-fade-15 { border-color: $white-fade-15 !important; }
|
||||
.border-white-fade-30 { border-color: $white-fade-30 !important; }
|
||||
.border-white-fade-50 { border-color: $white-fade-50 !important; }
|
||||
.border-white-fade-70 { border-color: $white-fade-70 !important; }
|
||||
.border-white-fade-85 { border-color: $white-fade-85 !important; }
|
||||
|
||||
@ -33,9 +33,19 @@
|
||||
.bg-yellow-dark { background-color: $bg-yellow-dark !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;
|
||||
@ -63,6 +73,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 */
|
||||
|
||||
@ -27,19 +27,19 @@ $display-values: (
|
||||
|
||||
// Hide utilities for each breakpoint
|
||||
// Each hide utility only applies to one breakpoint range.
|
||||
@media (max-width: $width-sm) {
|
||||
@media (max-width: $width-sm - 1px) {
|
||||
.hide-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $width-sm) and (max-width: $width-md) {
|
||||
@media (min-width: $width-sm) and (max-width: $width-md - 1px) {
|
||||
.hide-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $width-md) and (max-width: $width-lg) {
|
||||
@media (min-width: $width-md) and (max-width: $width-lg - 1px) {
|
||||
.hide-lg {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user