1
1
mirror of https://github.com/primer/css.git synced 2024-12-02 07:53:06 +03:00

Merge remote-tracking branch 'origin/release-12.0.2' into update-inter-font

This commit is contained in:
Shawn Allen 2019-02-27 13:32:31 -08:00
commit ebcb391a29
12 changed files with 160 additions and 69 deletions

View File

@ -1,3 +1,18 @@
# 12.0.2
### :memo: Documentation
- Explain why `.tooltipped` should be used sparingly [#676](https://github.com/primer/css/pull/676)
- Fix trailing slash errors in Next.js [#681](https://github.com/primer/css/pull/681)
- Add static assets to Now deployments [#687](https://github.com/primer/css/pull/687)
- Shiny new social and README header by @ashygee [#689](https://github.com/primer/css/pull/689)
### :house: Internal
- Remove `postversion` script from `package.json` and update the [PR template](https://github.com/primer/css/blob/master/RELEASING.md#in-this-repo)
#### Committers: 2
- Ash Guillaume ([ashygee](https://github.com/ashygee))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
# 12.0.1
### :bug: Bug Fix
@ -8,6 +23,10 @@
### :house: Internal
- Add `postversion` npm script that commits `package.json` and `package-lock.json` with consistent commit messages (`chore: v<version>`)
#### Committers: 2
- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends))
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
# 12.0.0
:rotating_light: **Starting with version 12.0.0, the `primer` package is now known as `@primer/css`**. See [MIGRATING.md](https://github.com/primer/css/tree/master/MIGRATING.md) for more info.
@ -15,6 +34,10 @@
#### :boom: Breaking Change
* [#666](https://github.com/primer/css/pull/666) Reorganize into a single `@primer/css` package ([@shawnbot](https://github.com/shawnbot))
#### Committers: 2
- Shawn Allen ([shawnbot](https://github.com/shawnbot))
- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends))
# 11.0.0
#### :boom: Breaking Change

View File

@ -1,7 +1,28 @@
# Primer
[![npm version](https://img.shields.io/npm/v/@primer/css.svg)](https://www.npmjs.org/package/@primer/css)
<p align="center">
<img width="300px" src="./static/readme.png">
</p>
Primer CSS is the Sass implementation of [Primer], the design system that powers GitHub.
<h1 align="center">Primer CSS</h1>
<p align="center">The CSS implementation of GitHub's Primer Design System</p>
<p align="center">
<a aria-label="npm package" href="https://www.npmjs.com/package/@primer/css">
<img alt="" src="https://img.shields.io/npm/v/@primer/css.svg">
</a>
<a aria-label="contributors graph" href="https://github.com/primer/css/graphs/contributors">
<img src="https://img.shields.io/github/contributors/primer/css.svg">
</a>
<a aria-label="last commit" href="https://github.com/primer/css/commits/master">
<img alt="" src="https://img.shields.io/github/last-commit/primer/css.svg">
</a>
<a aria-label="join us in spectrum" href="https://spectrum.chat/primer">
<img alt="" src="https://withspectrum.github.io/badge/badge.svg">
</a>
<a aria-label="license" href="https://github.com/primer/css/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/primer/css.svg" alt="">
</a>
</p>
## Migrating
:rotating_light: **If you currently use the `primer` or `primer-`-prefixed npm packages, please read [the migration guide](MIGRATING.md)!**

View File

@ -40,7 +40,7 @@
### Ship checklist
- [ ] Update `CHANGELOG.md`
- [ ] Update the version in `package.json` with `npm version <version>`
- [ ] 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

View File

@ -1,4 +1,4 @@
<svg width="100%" viewBox="0 0 1068 427" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="100%" viewBox="0 0 1068 426" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<rect width="276" height="276" transform="matrix(1 0 0 -1 782 362)" fill="#1B1F23"/>
<g clip-path="url(#clip1)">
@ -451,8 +451,8 @@
<rect x="915.776" y="301" width="98.2239" height="36" fill="#005CC5"/>
<rect x="766" y="203" width="91" height="24" fill="#044289"/>
<rect x="881" y="203" width="30" height="24" fill="#044289"/>
<rect width="24" height="24" transform="matrix(1 0 -0.000289166 1 982.005 138)" stroke="#2188FF" stroke-width="2" stroke-linejoin="round"/>
<path d="M950 178C950 182.8 941 182.8 941 187.6C941 192.4 950 192.4 950 197.2C950 202 941 202 941 206.8C941 211.6 950 211.6 950 216.4C950 221.2 941 221.2 941 226" stroke="#C8E1FF" stroke-linecap="round" stroke-linejoin="round"/>
<rect width="24" height="23.9438" transform="matrix(1 0 -0.000289845 1 982.005 137.677)" stroke="#2188FF" stroke-width="2" stroke-linejoin="round"/>
<path d="M950 177.583C950 182.383 940 182.383 940 187.183C940 191.983 950 191.983 950 196.783C950 201.583 940 201.583 940 206.383C940 211.183 950 211.183 950 215.983C950 220.783 940 220.783 940 225.583" stroke="#C8E1FF" stroke-linecap="round" stroke-linejoin="round"/>
<g clip-path="url(#clip2)">
<rect width="276" height="276" transform="translate(406 48)" fill="#1B1F23"/>
<g clip-path="url(#clip3)">
@ -900,9 +900,9 @@
</g>
<rect x="406.5" y="48.5" width="255" height="255" fill="#1B1F23" stroke="#79B8FF"/>
</g>
<rect width="14.2566" height="14.2566" transform="matrix(-0.70678 -0.707433 -0.706576 0.707638 458.063 273.688)" stroke="#C8E1FF" stroke-linejoin="round"/>
<rect width="14.2399" height="14.2399" transform="matrix(-0.70761 -0.706604 -0.707405 0.706808 458.063 273.047)" stroke="#C8E1FF" stroke-linejoin="round"/>
<path d="M630 87.9998L626 94.928H618L614 87.9998L618 81.0716H626L630 87.9998Z" stroke="#2188FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M585 143C587 143 587 139 589 139C591 139 591 143 593 143C595 143 595 139 597 139C599 139 599 143 601 143C603 143 603 139 605 139" stroke="#C8E1FF" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M585 142.665C587 142.665 587 138.674 589 138.674C591 138.674 591 142.665 593 142.665C595 142.665 595 138.674 597 138.674C599 138.674 599 142.665 601 142.665C603 142.665 603 138.674 605 138.674" stroke="#C8E1FF" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M567.531 258H576.391L551.453 190.359H543.109L518.172 258H527.031L533.828 238.64H560.734L567.531 258ZM547.141 200.625H547.422L558.25 231.469H536.312L547.141 200.625Z" fill="#005CC5"/>
<path d="M599.188 251.906C593.328 251.906 589.438 248.859 589.438 244.219C589.438 239.625 593.188 236.719 599.75 236.297L612.781 235.5V239.484C612.781 246.515 606.875 251.906 599.188 251.906ZM597.359 258.844C603.922 258.844 610.109 255.187 613.016 249.609H613.203V258H620.938V224.297C620.938 214.594 613.719 208.406 602.281 208.406C590.75 208.406 583.531 214.875 582.969 223.312H590.844C591.875 218.531 595.812 215.578 602.094 215.578C608.844 215.578 612.781 219.14 612.781 225.094V229.172L598.812 229.969C587.562 230.625 581.141 235.875 581.141 244.219C581.141 252.984 587.656 258.844 597.359 258.844Z" fill="#005CC5"/>
<rect x="517" y="262" width="105" height="2" fill="#005CC5"/>
@ -1364,13 +1364,13 @@
<path fill-rule="evenodd" clip-rule="evenodd" d="M105.04 385C113.919 371.203 126.719 321.529 126.719 282.312C126.719 230.788 106.346 205.127 97.3284 205.127C88.3109 205.127 67.9377 230.788 67.9377 282.312C67.9377 321.529 80.7375 371.203 89.6172 385H105.04Z" fill="#005CC5"/>
</mask>
<g mask="url(#mask0)">
<path d="M77.2164 256.979V235.564H76.2164V256.979H77.2164ZM87.8112 267.857C81.9716 267.857 77.2164 262.999 77.2164 256.979H76.2164C76.2164 263.527 81.3958 268.857 87.8112 268.857V267.857ZM98.4059 256.979C98.4059 262.999 93.6507 267.857 87.8112 267.857V268.857C94.2266 268.857 99.4059 263.527 99.4059 256.979H98.4059ZM98.4059 235.564V256.979H99.4059V235.564H98.4059ZM103.322 244.264C103.322 233.65 94.9282 225.025 84.548 225.025V226.025C94.3524 226.025 102.322 234.179 102.322 244.264H103.322ZM103.322 269.695V244.264H102.322V269.695H103.322ZM84.548 288.934C94.9282 288.934 103.322 280.308 103.322 269.695H102.322C102.322 279.78 94.3524 287.934 84.548 287.934V288.934ZM65.7742 269.695C65.7742 280.308 74.1678 288.934 84.548 288.934V287.934C74.7436 287.934 66.7742 279.78 66.7742 269.695H65.7742ZM65.7742 244.264V269.695H66.7742V244.264H65.7742ZM84.548 225.025C74.1678 225.025 65.7742 233.65 65.7742 244.264H66.7742C66.7742 234.179 74.7436 226.025 84.548 226.025V225.025ZM143.132 316.769C143.132 307.635 135.908 300.208 126.969 300.208V301.208C135.332 301.208 142.132 308.163 142.132 316.769H143.132ZM143.132 394.402V316.769H142.132V394.402H143.132ZM126.969 410.963C135.908 410.963 143.132 403.537 143.132 394.402H142.132C142.132 403.008 135.332 409.963 126.969 409.963V410.963ZM108.695 410.963H126.969V409.963H108.695V410.963ZM92.5322 394.402C92.5322 403.537 99.757 410.963 108.695 410.963V409.963C100.333 409.963 93.5322 403.008 93.5322 394.402H92.5322ZM92.5322 316.769V394.402H93.5322V316.769H92.5322ZM108.695 300.208C99.757 300.208 92.5322 307.635 92.5322 316.769H93.5322C93.5322 308.163 100.333 301.208 108.695 301.208V300.208ZM126.969 300.208H108.695V301.208H126.969V300.208ZM135.301 327.477C135.301 321.299 130.414 316.269 124.359 316.269V317.269C129.838 317.269 134.301 321.828 134.301 327.477H135.301ZM135.301 363.616V327.477H134.301V363.616H135.301ZM124.359 374.824C130.414 374.824 135.301 369.794 135.301 363.616H134.301C134.301 369.266 129.838 373.824 124.359 373.824V374.824ZM113.917 374.824H124.359V373.824H113.917V374.824ZM102.974 363.616C102.974 369.794 107.862 374.824 113.917 374.824V373.824C108.437 373.824 103.974 369.266 103.974 363.616H102.974ZM102.974 327.477V363.616H103.974V327.477H102.974ZM113.917 316.269C107.862 316.269 102.974 321.299 102.974 327.477H103.974C103.974 321.828 108.437 317.269 113.917 317.269V316.269ZM124.359 316.269H113.917V317.269H124.359V316.269ZM132.69 336.847C132.69 332.147 128.972 328.316 124.359 328.316V329.316C128.396 329.316 131.69 332.676 131.69 336.847H132.69ZM132.69 356.924V336.847H131.69V356.924H132.69ZM124.359 365.455C128.972 365.455 132.69 361.624 132.69 356.924H131.69C131.69 361.095 128.396 364.455 124.359 364.455V365.455ZM117.832 365.455H124.359V364.455H117.832V365.455ZM109.501 356.924C109.501 361.624 113.219 365.455 117.832 365.455V364.455C113.795 364.455 110.501 361.095 110.501 356.924H109.501ZM109.501 336.847V356.924H110.501V336.847H109.501ZM117.832 328.316C113.219 328.316 109.501 332.147 109.501 336.847H110.501C110.501 332.676 113.795 329.316 117.832 329.316V328.316ZM124.359 328.316H117.832V329.316H124.359V328.316Z" fill="#C8E1FF"/>
<path d="M77.2164 256.979V235.564H76.2164V256.979H77.2164ZM87.8112 267.857C81.9716 267.857 77.2164 262.999 77.2164 256.979H76.2164C76.2164 263.527 81.3958 268.857 87.8112 268.857V267.857ZM98.406 256.979C98.406 262.999 93.6508 267.857 87.8112 267.857V268.857C94.2266 268.857 99.406 263.527 99.406 256.979H98.406ZM98.406 235.564V256.979H99.406V235.564H98.406ZM103.322 244.264C103.322 233.65 94.9283 225.025 84.548 225.025V226.025C94.3524 226.025 102.322 234.179 102.322 244.264H103.322ZM103.322 269.695V244.264H102.322V269.695H103.322ZM84.548 288.934C94.9283 288.934 103.322 280.308 103.322 269.695H102.322C102.322 279.78 94.3524 287.934 84.548 287.934V288.934ZM65.7743 269.695C65.7743 280.308 74.1678 288.934 84.548 288.934V287.934C74.7436 287.934 66.7743 279.78 66.7743 269.695H65.7743ZM65.7743 244.264V269.695H66.7743V244.264H65.7743ZM84.548 225.025C74.1678 225.025 65.7743 233.65 65.7743 244.264H66.7743C66.7743 234.179 74.7436 226.025 84.548 226.025V225.025ZM143.132 316.769C143.132 307.635 135.908 300.208 126.969 300.208V301.208C135.332 301.208 142.132 308.163 142.132 316.769H143.132ZM143.132 394.402V316.769H142.132V394.402H143.132ZM126.969 410.963C135.908 410.963 143.132 403.537 143.132 394.402H142.132C142.132 403.008 135.332 409.963 126.969 409.963V410.963ZM108.695 410.963H126.969V409.963H108.695V410.963ZM92.5323 394.402C92.5323 403.537 99.757 410.963 108.695 410.963V409.963C100.333 409.963 93.5323 403.008 93.5323 394.402H92.5323ZM92.5323 316.769V394.402H93.5323V316.769H92.5323ZM108.695 300.208C99.757 300.208 92.5323 307.635 92.5323 316.769H93.5323C93.5323 308.163 100.333 301.208 108.695 301.208V300.208ZM126.969 300.208H108.695V301.208H126.969V300.208ZM135.301 327.477C135.301 321.299 130.414 316.269 124.359 316.269V317.269C129.838 317.269 134.301 321.828 134.301 327.477H135.301ZM135.301 363.616V327.477H134.301V363.616H135.301ZM124.359 374.824C130.414 374.824 135.301 369.794 135.301 363.616H134.301C134.301 369.266 129.838 373.824 124.359 373.824V374.824ZM113.917 374.824H124.359V373.824H113.917V374.824ZM102.974 363.616C102.974 369.794 107.862 374.824 113.917 374.824V373.824C108.437 373.824 103.974 369.266 103.974 363.616H102.974ZM102.974 327.477V363.616H103.974V327.477H102.974ZM113.917 316.269C107.862 316.269 102.974 321.299 102.974 327.477H103.974C103.974 321.828 108.437 317.269 113.917 317.269V316.269ZM124.359 316.269H113.917V317.269H124.359V316.269ZM132.69 336.847C132.69 332.147 128.972 328.316 124.359 328.316V329.316C128.396 329.316 131.69 332.676 131.69 336.847H132.69ZM132.69 356.924V336.847H131.69V356.924H132.69ZM124.359 365.455C128.972 365.455 132.69 361.624 132.69 356.924H131.69C131.69 361.095 128.396 364.455 124.359 364.455V365.455ZM117.832 365.455H124.359V364.455H117.832V365.455ZM109.501 356.924C109.501 361.624 113.219 365.455 117.832 365.455V364.455C113.795 364.455 110.501 361.095 110.501 356.924H109.501ZM109.501 336.847V356.924H110.501V336.847H109.501ZM117.832 328.316C113.219 328.316 109.501 332.147 109.501 336.847H110.501C110.501 332.676 113.795 329.316 117.832 329.316V328.316ZM124.359 328.316H117.832V329.316H124.359V328.316Z" fill="#C8E1FF"/>
</g>
<path d="M122.747 245.628H71.9094C78.2964 218.602 90.7939 205.127 97.3283 205.127C103.863 205.127 116.36 218.602 122.747 245.628Z" fill="#044289"/>
<path d="M122.747 245.628H71.9094C78.2964 218.602 90.7939 205.127 97.3284 205.127C103.863 205.127 116.36 218.602 122.747 245.628Z" fill="#044289"/>
<path d="M89.2577 209.617C90.8873 210.495 93.8917 211.083 97.3284 211.083C100.765 211.083 103.769 210.495 105.399 209.617C102.345 206.623 99.5055 205.127 97.3284 205.127C97.3284 205.127 97.3284 205.127 97.3284 205.127C95.1512 205.127 92.3122 206.623 89.2577 209.617Z" fill="#032F62"/>
<path d="M129.601 176.015C129.601 193.685 115.285 208.01 97.6253 208.01C79.9655 208.01 65.6494 193.685 65.6494 176.015C65.6494 155.351 96.2929 130.688 97.6253 114.691C98.9576 130.688 129.601 156.018 129.601 176.015Z" fill="#005CC5" stroke="#005CC5" stroke-width="1.18421" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M129.601 176.015C129.601 193.685 115.285 208.01 97.6252 208.01C79.9654 208.01 65.6493 193.685 65.6493 176.015C65.6493 155.351 96.2929 130.688 97.6252 114.691C98.9576 130.688 129.601 156.018 129.601 176.015Z" fill="#005CC5" stroke="#005CC5" stroke-width="1.18421" stroke-linecap="round" stroke-linejoin="round"/>
<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="65" y="114" width="66" height="95">
<path d="M129.601 176.015C129.601 193.685 115.285 208.01 97.6253 208.01C79.9655 208.01 65.6494 193.685 65.6494 176.015C65.6494 155.351 96.2929 130.688 97.6253 114.691C98.9576 130.688 129.601 156.018 129.601 176.015Z" fill="#C8E1FF" stroke="#C8E1FF" stroke-width="1.18421"/>
<path d="M129.601 176.015C129.601 193.685 115.285 208.01 97.6252 208.01C79.9654 208.01 65.6493 193.685 65.6493 176.015C65.6493 155.351 96.2929 130.688 97.6252 114.691C98.9576 130.688 129.601 156.018 129.601 176.015Z" fill="#C8E1FF" stroke="#C8E1FF" stroke-width="1.18421"/>
</mask>
<g mask="url(#mask1)">
<ellipse cx="87.4511" cy="184.533" rx="36.3363" ry="36.3884" fill="#2188FF"/>
@ -1380,9 +1380,9 @@
<rect x="454.875" y="125" width="29.6875" height="23.7719" fill="#044289"/>
<rect x="508.312" y="125" width="30.2813" height="23.7719" fill="#044289"/>
<rect x="419.844" y="125" width="11.2812" height="23.7719" fill="#044289"/>
<rect width="16" height="16" transform="matrix(0.707107 0.707107 -0.707311 0.706902 40.9755 70.9998)" stroke="#2188FF" stroke-width="2" stroke-linejoin="round"/>
<path d="M1012 38.9998C1016 38.9998 1016 30.9998 1020 30.9998C1024 30.9998 1024 38.9998 1028 38.9998C1032 38.9998 1032 30.9998 1036 30.9998C1040 30.9998 1040 38.9998 1044 38.9998C1048 38.9998 1048 30.9998 1052 30.9998" stroke="#2188FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M723 342C725 342 725 338 727 338C729 338 729 342 731 342C733 342 733 338 735 338C737 338 737 342 739 342C741 342 741 338 743 338" stroke="#C8E1FF" stroke-linecap="round" stroke-linejoin="round"/>
<rect width="15.9813" height="15.9813" transform="matrix(0.707935 0.706277 -0.70814 0.706073 40.9755 70.8335)" stroke="#2188FF" stroke-width="2" stroke-linejoin="round"/>
<path d="M1012 38.9084C1016 38.9084 1016 30.9272 1020 30.9272C1024 30.9272 1024 38.9084 1028 38.9084C1032 38.9084 1032 30.9272 1036 30.9272C1040 30.9272 1040 38.9084 1044 38.9084C1048 38.9084 1048 30.9272 1052 30.9272" stroke="#2188FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M723 341.199C725 341.199 725 337.208 727 337.208C729 337.208 729 341.199 731 341.199C733 341.199 733 337.208 735 337.208C737 337.208 737 341.199 739 341.199C741 341.199 741 337.208 743 337.208" stroke="#C8E1FF" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="518" cy="388" r="18" fill="#1B1F23" stroke="#C8E1FF"/>
<path d="M492 370L476 370L484 356L492 370Z" stroke="#2188FF" stroke-width="2" stroke-linejoin="round"/>
<rect x="838" y="252" width="38" height="31" fill="#1B1F23"/>
@ -1390,11 +1390,11 @@
<rect x="315" y="285" width="28" height="7" fill="#1B1F23"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M341.857 278.375H329C327.821 278.375 326.857 279.331 326.857 280.5V297.5C326.857 298.669 327.821 299.625 329 299.625H341.857C343.036 299.625 344 298.669 344 297.5V280.5C344 279.331 343.036 278.375 341.857 278.375ZM339.714 295.375H331.143V282.625H339.714V295.375ZM322.571 280.5H324.714V282.625H322.571V295.375H324.714V297.5H322.571C321.393 297.5 320.429 296.544 320.429 295.375V282.625C320.429 281.456 321.393 280.5 322.571 280.5ZM316.143 282.625H318.286V284.75H316.143V293.25H318.286V295.375H316.143C314.964 295.375 314 294.419 314 293.25V284.75C314 283.581 314.964 282.625 316.143 282.625Z" fill="#79B8FF"/>
<path d="M262 52.9998V41.9998L273 43.9998L283 41.9998V52.9998L273 55.9998L262 52.9998Z" fill="#1B1F23"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M261.5 41.4047V52.6097C261.5 53.2847 261.95 53.8697 262.625 54.0647L272.375 56.6597C272.615 56.7348 272.885 56.7348 273.125 56.6597L282.875 54.0647C283.55 53.8697 284 53.2847 284 52.6097V41.4047C284 40.7297 283.55 40.1447 282.875 39.9497L273.125 37.3397C272.885 37.2947 272.615 37.2947 272.375 37.3397L262.625 39.9497C261.95 40.1447 261.5 40.7297 261.5 41.4047ZM272 55.0397L263 52.6547V42.4997L272 44.9147V55.0397ZM263 40.9997L266.75 39.9947L276.5 42.5897L272.75 43.5947L263 40.9997ZM282.5 52.6547L273.5 55.0397V44.9147L276.5 44.0897V47.7497L279.5 46.9548V43.2947L282.5 42.4997V52.6547ZM279.5 41.7947L269.75 39.1997L272.75 38.4047L282.5 40.9997L279.5 41.7947Z" fill="#79B8FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M261.5 41.4048V52.6098C261.5 53.2848 261.95 53.8698 262.625 54.0648L272.375 56.6598C272.615 56.7348 272.885 56.7348 273.125 56.6598L282.875 54.0648C283.55 53.8698 284 53.2848 284 52.6098V41.4048C284 40.7298 283.55 40.1448 282.875 39.9498L273.125 37.3398C272.885 37.2948 272.615 37.2948 272.375 37.3398L262.625 39.9498C261.95 40.1448 261.5 40.7298 261.5 41.4048ZM272 55.0398L263 52.6548V42.4998L272 44.9148V55.0398ZM263 40.9998L266.75 39.9948L276.5 42.5898L272.75 43.5948L263 40.9998ZM282.5 52.6548L273.5 55.0398V44.9148L276.5 44.0898V47.7498L279.5 46.9548V43.2948L282.5 42.4998V52.6548ZM279.5 41.7948L269.75 39.1998L272.75 38.4048L282.5 40.9998L279.5 41.7948Z" fill="#79B8FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M197.175 183.65L194.475 180.3C194.05 179.75 193.775 179.1 193.7 178.375L193.225 174.125C193.025 172.375 191.65 171 189.9 170.8L185.65 170.325C184.9 170.25 184.25 169.925 183.7 169.5L180.35 166.8C178.975 165.7 177.025 165.7 175.65 166.8L172.3 169.5C171.75 169.925 171.1 170.2 170.375 170.275L166.125 170.75C164.375 170.95 163 172.325 162.8 174.075L162.325 178.325C162.25 179.075 161.925 179.725 161.5 180.275L158.8 183.625C157.7 185 157.7 186.95 158.8 188.325L161.5 191.675C161.925 192.225 162.2 192.875 162.275 193.6L162.75 197.85C162.95 199.6 164.325 200.975 166.075 201.175L170.325 201.65C171.075 201.725 171.725 202.05 172.275 202.475L175.625 205.175C177 206.275 178.95 206.275 180.325 205.175L183.675 202.475C184.225 202.05 184.875 201.775 185.6 201.7L189.85 201.225C191.6 201.025 192.975 199.65 193.175 197.9L193.65 193.65C193.725 192.9 194.05 192.25 194.475 191.7L197.175 188.35C198.275 186.975 198.275 185.025 197.175 183.65ZM174.25 196L165.5 187.25L169.25 183.5L174.25 188.5L186.75 176L190.5 179.875L174.25 196Z" fill="#79B8FF"/>
<path d="M719 138H734.529L741 144.265V164H719V138Z" fill="#1B1F23"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M735 136H720C718.9 136 718 136.9 718 138V162C718 163.1 718.9 164 720 164H740C741.1 164 742 163.1 742 162V143L735 136ZM740 162H720V138H734L740 144V162ZM728 147.96L725 151L728 154L727 156L722 151L727 146L728 147.96ZM733 146L738 151L733 156L732 154.04L735 151L732 148L733 146Z" fill="#79B8FF"/>
<path d="M103 223C107 223 107 231 111 231C115 231 115 223 119 223C123 223 123 231 127 231C131 231 131 223 135 223C139 223 139 231 143 231" stroke="#2188FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M103 222.478C107 222.478 107 230.459 111 230.459C115 230.459 115 222.478 119 222.478C123 222.478 123 230.459 127 230.459C131 230.459 131 222.478 135 222.478C139 222.478 139 230.459 143 230.459" stroke="#2188FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<clipPath id="clip0">
<rect width="276" height="276" fill="white" transform="matrix(1 0 0 -1 782 362)"/>

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 94 KiB

View File

@ -28,3 +28,16 @@ export default function redirect(uri, status = 303) {
}
}
}
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
}
}

View File

@ -11,7 +11,8 @@
"postcss.config.js",
"pages",
"script",
"src"
"src",
"static"
],
"scale": {
"sfo": {

79
package-lock.json generated
View File

@ -1306,9 +1306,9 @@
}
},
"@primer/components": {
"version": "8.2.0-beta",
"resolved": "https://registry.npmjs.org/@primer/components/-/components-8.2.0-beta.tgz",
"integrity": "sha512-EnZDWjOWUDOQvQan1SbW/t10wr6pNA521fZnPcEDMaUbznKM6E4RKC0dmnDFUTP+7DPHL5mjShDzBvCJ6D4C8w==",
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/@primer/components/-/components-10.0.1.tgz",
"integrity": "sha512-DMIA5CS1iJr1icZ/I5CToJYXqZSfbMyeqm7Br+cc76ETSzjDWZ44/xwao3HiQwxR7HWLd0fBpTlzqp9u9vDO/w==",
"dev": true,
"requires": {
"@githubprimer/octicons-react": "8.1.2",
@ -1319,8 +1319,8 @@
"primer-colors": "1.0.1",
"primer-markdown": "3.7.9",
"primer-typography": "1.0.1",
"react": "16.4.2",
"react-dom": "16.4.2",
"react": "16.8.0",
"react-dom": "16.8.0",
"styled-components": "4.1.2",
"styled-system": "3.1.3",
"system-components": "3.0.1"
@ -1346,14 +1346,15 @@
}
},
"cosmiconfig": {
"version": "5.0.7",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.0.7.tgz",
"integrity": "sha512-PcLqxTKiDmNT6pSpy4N6KtuPwb53W+2tzNvwOZw0WH9N6O0vLIBq0x8aj8Oj75ere4YcGi48bDFCL+3fRJdlNA==",
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.1.0.tgz",
"integrity": "sha512-kCNPvthka8gvLtzAxQXvWo4FxqRB+ftRZyPZNuab5ngvM9Y7yw7hbEysglptLgpkGX9nAOKTBVkHUAe8xtYR6Q==",
"dev": true,
"requires": {
"import-fresh": "^2.0.0",
"is-directory": "^0.3.1",
"js-yaml": "^3.9.0",
"lodash.get": "^4.4.2",
"parse-json": "^4.0.0"
}
},
@ -1374,27 +1375,37 @@
}
},
"react": {
"version": "16.4.2",
"resolved": "https://registry.npmjs.org/react/-/react-16.4.2.tgz",
"integrity": "sha512-dMv7YrbxO4y2aqnvA7f/ik9ibeLSHQJTI6TrYAenPSaQ6OXfb+Oti+oJiy8WBxgRzlKatYqtCjphTgDSCEiWFg==",
"version": "16.8.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.8.0.tgz",
"integrity": "sha512-g+nikW2D48kqgWSPwNo0NH9tIGG3DsQFlrtrQ1kj6W77z5ahyIHG0w8kPpz4Sdj6gyLnz0lEd/xsjOoGge2MYQ==",
"dev": true,
"requires": {
"fbjs": "^0.8.16",
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.0"
"prop-types": "^15.6.2",
"scheduler": "^0.13.0"
}
},
"react-dom": {
"version": "16.4.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.4.2.tgz",
"integrity": "sha512-Usl73nQqzvmJN+89r97zmeUpQDKDlh58eX6Hbs/ERdDHzeBzWy+ENk7fsGQ+5KxArV1iOFPT46/VneklK9zoWw==",
"version": "16.8.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.0.tgz",
"integrity": "sha512-dBzoAGYZpW9Yggp+CzBPC7q1HmWSeRc93DWrwbskmG1eHJWznZB/p0l/Sm+69leIGUS91AXPB/qB3WcPnKx8Sw==",
"dev": true,
"requires": {
"fbjs": "^0.8.16",
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.0"
"prop-types": "^15.6.2",
"scheduler": "^0.13.0"
}
},
"scheduler": {
"version": "0.13.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.2.tgz",
"integrity": "sha512-qK5P8tHS7vdEMCW5IPyt8v9MJOHqTrOUgPXib7tqm9vh834ibBX5BNhwkplX/0iOzHW5sXyluehYfS9yrkz9+w==",
"dev": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
}
},
"styled-components": {
@ -11773,9 +11784,9 @@
"dev": true
},
"handlebars": {
"version": "4.0.12",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.12.tgz",
"integrity": "sha512-RhmTekP+FZL+XNhwS1Wf+bTTZpdLougwt5pcgA1tuz6Jcx0fpH/7z0qd71RKnZHBCxIRBHfBOnio4gViPemNzA==",
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.0.tgz",
"integrity": "sha512-l2jRuU1NAWK6AW5qqcTATWQJvNPEwkM7NEKSiv/gqOsoSQbVoWyqVEY5GS+XPQ88zLNmqASRpzfdm8d79hJS+w==",
"dev": true,
"requires": {
"async": "^2.5.0",
@ -23936,13 +23947,12 @@
"dev": true
},
"styled-components": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.1.3.tgz",
"integrity": "sha512-0quV4KnSfvq5iMtT0RzpMGl/Dg3XIxIxOl9eJpiqiq4SrAmR1l1DLzNpMzoy3DyzdXVDMJS2HzROnXscWA3SEw==",
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.1.2.tgz",
"integrity": "sha512-NdvWatJ2WLqZxAvto+oH0k7GAC/TlAUJTrHoXJddjbCrU6U23EmVbb9LXJBF+d6q6hH+g9nQYOWYPUeX/Vlc2w==",
"dev": true,
"requires": {
"@babel/helper-module-imports": "^7.0.0",
"@emotion/is-prop-valid": "^0.7.3",
"@emotion/is-prop-valid": "^0.6.8",
"@emotion/unitless": "^0.7.0",
"babel-plugin-styled-components": ">= 1",
"css-to-react-native": "^2.2.2",
@ -23952,23 +23962,6 @@
"stylis": "^3.5.0",
"stylis-rule-sheet": "^0.0.10",
"supports-color": "^5.5.0"
},
"dependencies": {
"@emotion/is-prop-valid": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz",
"integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==",
"dev": true,
"requires": {
"@emotion/memoize": "0.7.1"
}
},
"@emotion/memoize": {
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz",
"integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==",
"dev": true
}
}
},
"styled-jsx": {

View File

@ -1,6 +1,6 @@
{
"name": "@primer/css",
"version": "12.0.1",
"version": "12.0.2",
"description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
"homepage": "http://primer.github.io/",
"author": "GitHub, Inc.",
@ -30,7 +30,7 @@
"lint-js": "eslint lib docs",
"now-build": "next build",
"now-start": "next start",
"postversion": "git commit -m \"chore: v$npm_package_version\" package*.json",
"now-test": "npm-run-all -s now-build now-start",
"postpublish": "script/postpublish",
"prepare": "npm run dist",
"prepublishOnly": "script/prepublish",
@ -50,7 +50,7 @@
"@githubprimer/octicons-react": "^8.1.3",
"@mdx-js/mdx": "^0.16.6",
"@mdx-js/tag": "0.15.0",
"@primer/components": "^8.2.0-beta",
"@primer/components": "10.0.1",
"@storybook/addon-options": "3.4.3",
"@storybook/addons": "3.4.3",
"@storybook/react": "3.4.3",
@ -125,7 +125,7 @@
"sass-loader": "^6.0.6",
"semver": "^5.3.0",
"style-loader": "^0.18.2",
"styled-components": "^4.1.2",
"styled-components": "4.1.2",
"stylelint": "9.10.1",
"stylelint-config-primer": "4.0.0",
"title-case": "^2.1.1",

26
pages/_error.js Normal file
View File

@ -0,0 +1,26 @@
import React from 'react'
import {Heading} from '@primer/components'
import {redirectTrailingSlash} from '../docs/redirect'
export default class extends React.Component {
static getInitialProps(context) {
// redirect trailing slash URLs to "clean" ones without
return redirectTrailingSlash(context) || getErrorProps(context)
}
render() {
const {url, statusCode = 500} = this.props
return <>
<Heading>Whoops! Thats a {statusCode}.</Heading>
<p>
We couldnt find anything at <code>{url}</code>.
{null && <>Have you tried <a href={`/css/search?q=${encodeURIComponent(url)}`}>searching</a>?</>}
</p>
</>
}
}
function getErrorProps({req, res, err}) {
const {statusCode} = err || res
return {statusCode, url: req.url}
}

View File

@ -6,9 +6,19 @@
@include breakpoint($breakpoint) {
@each $scale, $size in $marketing-spacers {
.pt#{$variant}-#{$scale} { padding-top: #{$size} !important; }
.pb#{$variant}-#{$scale} { padding-bottom: #{$size} !important; }
/* Set a #{$size} padding for all sides */
.p#{$variant}-#{$scale} { padding: #{$size} !important; }
/* Set a #{$size} padding to the top */
.pt#{$variant}-#{$scale} { padding-top: #{$size} !important; }
/* Set a #{$size} padding to the right */
.pr#{$variant}-#{$scale} { padding-right: #{$size} !important; }
/* Set a #{$size} padding to the bottom */
.pb#{$variant}-#{$scale} { padding-bottom: #{$size} !important; }
/* Set a #{$size} padding to the left */
.pl#{$variant}-#{$scale} { padding-left: #{$size} !important; }
/* Set a #{$size} padding to the top & bottom */
.py#{$variant}-#{$scale} {
padding-top: #{$size} !important;
padding-bottom: #{$size} !important;

View File

@ -47,7 +47,11 @@ Add tooltips built entirely in CSS to nearly any element.
## Implementation and accessibility
**Attention**: we use `aria-label` for tooltips instead of something like `data-tooltip` because it is crucial that the tooltip content is available for screen reader users as well. However, `aria-label` **replaces** the text content of an element for screen reader users, so only use tooltip if there is no better way to present the information, or consider using `title` for supplement information.
Tooltips as a UI pattern should be our last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence.
Before adding a tooltip, please consider: Is this information essential and necessary* Can the UI be made clearer? Can the information be shown on the page by default?
**Attention**: we use `aria-label` for tooltip contents, because it is crucial that they are accessible to screen reader users. However, `aria-label` **replaces** the text content of an element in screen readers, so only use `.tooltipped` on elements with no existing text content, or consider using `title` for supplemental information.
**Note:** Tooltip classes will conflict with Octicon styles, and as such, must be applied to the parent element instead of the icon.

BIN
static/readme.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB