diff --git a/modules/primer-marketing-utilities/docs/padding.md b/modules/primer-marketing-utilities/docs/padding.md
index 71ce6997..ee7ba75d 100644
--- a/modules/primer-marketing-utilities/docs/padding.md
+++ b/modules/primer-marketing-utilities/docs/padding.md
@@ -4,7 +4,7 @@ status: New release
status_issue: https://github.com/github/design-systems/issues/378
---
-Marketing padding utilities extend [core margin utilities](../../primer-marketing-support/docs/spacing) across the y-axis only. The [marketing scale](../../primer-marketing-support) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
+Marketing padding utilities extend [core margin utilities](../../support/spacing) across the y-axis only. The [marketing scale](../../support/marketing-variables/#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
## Y-axis padding utilities
@@ -24,7 +24,7 @@ Use marketing padding utilities to apply padding to top, bottom, or both y-axis
## Responsive y-axis padding utilities
-All marketing padding utilities can be adjusted per [breakpoint](/styleguide/css/modules/grid#breakpoints) using the following formula: `p[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
+All marketing padding utilities can be adjusted per [breakpoint](../../objects/grid#breakpoints) using the following formula: `p[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
```html
diff --git a/modules/primer-marketing-utilities/package.json b/modules/primer-marketing-utilities/package.json
index dcc2329b..534fc8b6 100644
--- a/modules/primer-marketing-utilities/package.json
+++ b/modules/primer-marketing-utilities/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.6.1",
+ "version": "1.6.2",
"name": "primer-marketing-utilities",
"description": "Marketing specific immutable, atomic CSS classes",
"homepage": "http://primer.github.io/",
@@ -33,8 +33,8 @@
"test": "../../script/npm-run-all build lint"
},
"dependencies": {
- "primer-marketing-support": "1.5.0",
- "primer-support": "4.5.2"
+ "primer-marketing-support": "1.5.1",
+ "primer-support": "4.5.3"
},
"keywords": [
"primer",
diff --git a/modules/primer-marketing/package.json b/modules/primer-marketing/package.json
index d58f08ac..6d1c8c6b 100644
--- a/modules/primer-marketing/package.json
+++ b/modules/primer-marketing/package.json
@@ -1,5 +1,5 @@
{
- "version": "6.2.0",
+ "version": "6.2.1",
"name": "primer-marketing",
"description": "Primer marketing packages",
"homepage": "http://primer.github.io/",
@@ -27,13 +27,13 @@
"lint": "../../script/lint-scss"
},
"dependencies": {
- "primer-marketing-buttons": "1.0.4",
- "primer-marketing-support": "1.5.0",
- "primer-marketing-type": "1.4.5",
- "primer-marketing-utilities": "1.6.1",
- "primer-page-headers": "1.4.5",
- "primer-page-sections": "1.4.5",
- "primer-support": "4.5.2",
- "primer-tables": "1.4.5"
+ "primer-marketing-buttons": "1.0.5",
+ "primer-marketing-support": "1.5.1",
+ "primer-marketing-type": "1.4.6",
+ "primer-marketing-utilities": "1.6.2",
+ "primer-page-headers": "1.4.6",
+ "primer-page-sections": "1.4.6",
+ "primer-support": "4.5.3",
+ "primer-tables": "1.4.6"
}
}
diff --git a/modules/primer-navigation/package.json b/modules/primer-navigation/package.json
index 567204a2..249cab8e 100644
--- a/modules/primer-navigation/package.json
+++ b/modules/primer-navigation/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.5.3",
+ "version": "1.5.4",
"name": "primer-navigation",
"description": "Singular purpose and flexible navigation elements.",
"homepage": "http://primer.github.io/",
@@ -28,7 +28,7 @@
"test": "../../script/npm-run-all build lint"
},
"dependencies": {
- "primer-support": "4.5.2"
+ "primer-support": "4.5.3"
},
"keywords": [
"primer",
diff --git a/modules/primer-page-headers/package.json b/modules/primer-page-headers/package.json
index 197df9d4..af729ad3 100644
--- a/modules/primer-page-headers/package.json
+++ b/modules/primer-page-headers/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.4.5",
+ "version": "1.4.6",
"name": "primer-page-headers",
"description": "Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.",
"homepage": "http://primer.github.io/",
@@ -28,8 +28,8 @@
"test": "../../script/npm-run-all build lint"
},
"dependencies": {
- "primer-marketing-support": "1.5.0",
- "primer-support": "4.5.2"
+ "primer-marketing-support": "1.5.1",
+ "primer-support": "4.5.3"
},
"keywords": [
"css",
diff --git a/modules/primer-page-sections/package.json b/modules/primer-page-sections/package.json
index 2e45b629..50d4d2c3 100644
--- a/modules/primer-page-sections/package.json
+++ b/modules/primer-page-sections/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.4.5",
+ "version": "1.4.6",
"name": "primer-page-sections",
"description": "Styles to create distinct sections of marketing pages at GitHub.",
"homepage": "http://primer.github.io/",
@@ -28,8 +28,8 @@
"test": "../../script/npm-run-all build lint"
},
"dependencies": {
- "primer-marketing-support": "1.5.0",
- "primer-support": "4.5.2"
+ "primer-marketing-support": "1.5.1",
+ "primer-support": "4.5.3"
},
"keywords": [
"css",
diff --git a/modules/primer-pagination/LICENSE b/modules/primer-pagination/LICENSE
new file mode 100644
index 00000000..71fbac5e
--- /dev/null
+++ b/modules/primer-pagination/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 GitHub Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/modules/primer-pagination/README.md b/modules/primer-pagination/README.md
new file mode 100644
index 00000000..7eae5648
--- /dev/null
+++ b/modules/primer-pagination/README.md
@@ -0,0 +1,88 @@
+# Primer Pagination
+
+[![npm version](https://img.shields.io/npm/v/primer-pagination.svg)](https://www.npmjs.org/package/primer-pagination)
+[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)
+
+> Pagination component for applying button styles to a connected set of links that go to related pages
+
+This repository is a module of the full [primer][primer] repository.
+
+## Install
+
+This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-pagination` with this command.
+
+```
+$ npm install --save primer-pagination
+```
+
+## Usage
+
+The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+
+```scss
+@import "primer-pagination/index.scss";
+```
+
+You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
+
+## Build
+
+For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
+
+```
+$ npm run build
+```
+
+## Documentation
+
+
+
+Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).
+
+{:toc}
+
+## Previous/next pagination
+
+You can make a very simple pagination container with just the Previous and Next buttons. Add the class `disabled` to the `Previous` button if there isn't a preceding page, or to the `Next` button if there isn't a succeeding page.
+
+```html
+
+
+
+```
+
+## Numbered pagination
+
+For pagination across multiple pages, make sure it's clear to the user where they are in a set of pages.
+
+To do this, add anchor links to the `pagination` element. Previous and Next buttons should always be present. Add the class `disabled` to the Previous button if you're on the first page. Apply the class `current` to the current numbered page.
+
+As always, make sure to include the appropriate `aria` attributes to make the element accessible.
+
+- Add `aria-label="Pagination"` to the the `paginate-container` element.
+- Add `aria-current="true"` to the current page marker.
+- Add `aria-label="Page X"` to each anchor link.
+
+```html
+
+
+
+```
+
+
diff --git a/modules/primer-pagination/index.scss b/modules/primer-pagination/index.scss
new file mode 100644
index 00000000..32c9cd81
--- /dev/null
+++ b/modules/primer-pagination/index.scss
@@ -0,0 +1,3 @@
+// support files
+@import "primer-support/index.scss";
+@import "./lib/pagination.scss";
diff --git a/modules/primer-pagination/lib/pagination.scss b/modules/primer-pagination/lib/pagination.scss
new file mode 100644
index 00000000..841cc0fb
--- /dev/null
+++ b/modules/primer-pagination/lib/pagination.scss
@@ -0,0 +1,74 @@
+// Needs refactoring
+// stylelint-disable selector-max-type
+.pagination {
+ @include clearfix;
+
+ a,
+ span,
+ em {
+ position: relative;
+ float: left;
+ padding: 7px 12px;
+ margin-left: -1px;
+ font-size: 13px;
+ font-style: normal;
+ font-weight: $font-weight-bold;
+ color: $text-blue;
+ white-space: nowrap;
+ vertical-align: middle;
+ cursor: pointer;
+ user-select: none;
+ background: $bg-white; // Reset default gradient backgrounds and colors
+ border: $border-width $border-style $border-gray;
+
+ &:first-child {
+ margin-left: 0;
+ border-top-left-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
+ }
+
+ &:last-child {
+ border-top-right-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
+ }
+
+ // Bring any button into forefront for proper borders given negative margin below
+ &:hover,
+ &:focus {
+ z-index: 2;
+ text-decoration: none;
+ background-color: darken($gray-100, 2%);
+ border-color: $border-gray;
+ }
+ }
+
+ .selected { z-index: 3; }
+
+ .current,
+ .current:hover {
+ z-index: 3;
+ color: $text-white;
+ background-color: $bg-blue;
+ border-color: $border-blue;
+ }
+
+ .gap,
+ .disabled,
+ .gap:hover,
+ .disabled:hover {
+ color: $gray-300;
+ cursor: default;
+ background-color: $bg-gray-light;
+ }
+}
+
+// Unified centered pagination across the site
+.paginate-container {
+ margin-top: 20px;
+ margin-bottom: 15px;
+ text-align: center;
+
+ .pagination {
+ display: inline-block;
+ }
+}
diff --git a/modules/primer-pagination/package.json b/modules/primer-pagination/package.json
new file mode 100644
index 00000000..53230c01
--- /dev/null
+++ b/modules/primer-pagination/package.json
@@ -0,0 +1,33 @@
+{
+ "version": "1.0.0",
+ "name": "primer-pagination",
+ "description": "Pagination component for applying button styles to a connected set of links that go to related pages",
+ "homepage": "http://primer.github.io/",
+ "primer": {
+ "category": "product",
+ "module_type": "components"
+ },
+ "author": "GitHub, Inc.",
+ "license": "MIT",
+ "style": "index.scss",
+ "sass": "index.scss",
+ "main": "build/index.js",
+ "repository": "https://github.com/primer/primer/tree/master/modules/primer-pagination",
+ "bugs": {
+ "url": "https://github.com/primer/primer/issues"
+ },
+ "scripts": {
+ "test-docs": "../../script/test-docs",
+ "build": "../../script/npm-run primer-module-build index.scss",
+ "prepare": "npm run build",
+ "lint": "../../script/lint-scss",
+ "test": "../../script/npm-run-all build lint test-docs"
+ },
+ "dependencies": {
+ "primer-support": "4.5.3"
+ },
+ "keywords": [
+ "github",
+ "primer"
+ ]
+}
diff --git a/modules/primer-pagination/stories.js b/modules/primer-pagination/stories.js
new file mode 100644
index 00000000..381896e1
--- /dev/null
+++ b/modules/primer-pagination/stories.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
+
+const stories = storiesOf('Pagination', module)
+
+storiesFromMarkdown(require.context('.', true, /\.md$/))
+ .forEach(({title, story}) => {
+ stories.add(title, story)
+ })
diff --git a/modules/primer-popover/package.json b/modules/primer-popover/package.json
index 75ac1971..50fd97f9 100644
--- a/modules/primer-popover/package.json
+++ b/modules/primer-popover/package.json
@@ -1,5 +1,5 @@
{
- "version": "0.0.6",
+ "version": "0.1.0",
"name": "primer-popover",
"description": "Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.",
"homepage": "http://primer.github.io/",
@@ -24,7 +24,7 @@
"test": "../../script/npm-run-all build lint test-docs"
},
"dependencies": {
- "primer-support": "4.5.2"
+ "primer-support": "4.5.3"
},
"peerDependencies": {
"primer-box": ">=2.5.0"
diff --git a/modules/primer-product/package.json b/modules/primer-product/package.json
index 3fe659f6..243faa85 100644
--- a/modules/primer-product/package.json
+++ b/modules/primer-product/package.json
@@ -1,5 +1,5 @@
{
- "version": "5.6.2",
+ "version": "5.6.3",
"name": "primer-product",
"description": "Primer's product modules",
"homepage": "http://primer.github.io/",
@@ -27,14 +27,14 @@
"lint": "../../script/lint-scss"
},
"dependencies": {
- "primer-alerts": "1.5.5",
- "primer-avatars": "1.5.2",
- "primer-blankslate": "1.4.5",
- "primer-branch-name": "1.0.3",
- "primer-labels": "1.5.5",
- "primer-markdown": "3.7.5",
- "primer-popover": "0.0.6",
- "primer-subhead": "1.0.3",
- "primer-support": "4.5.2"
+ "primer-alerts": "1.5.6",
+ "primer-avatars": "1.5.3",
+ "primer-blankslate": "1.4.6",
+ "primer-branch-name": "1.0.4",
+ "primer-labels": "1.5.6",
+ "primer-markdown": "3.7.6",
+ "primer-popover": "0.1.0",
+ "primer-subhead": "1.0.4",
+ "primer-support": "4.5.3"
}
}
diff --git a/modules/primer-subhead/package.json b/modules/primer-subhead/package.json
index d0f23c09..a2b6d4e4 100644
--- a/modules/primer-subhead/package.json
+++ b/modules/primer-subhead/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.0.3",
+ "version": "1.0.4",
"name": "primer-subhead",
"description": "The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages.",
"homepage": "http://primer.github.io/",
@@ -24,7 +24,7 @@
"test": "../../script/npm-run-all build lint test-docs"
},
"dependencies": {
- "primer-support": "4.5.2"
+ "primer-support": "4.5.3"
},
"keywords": [
"github",
diff --git a/modules/primer-support/docs/breakpoints.md b/modules/primer-support/docs/breakpoints.md
index 12f94a6b..96558bd0 100644
--- a/modules/primer-support/docs/breakpoints.md
+++ b/modules/primer-support/docs/breakpoints.md
@@ -19,7 +19,7 @@ We use abbreviations for each breakpoint to keep the class names concise. This a
**Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `16px` (`$spacer-3`). This is so that content doesn't touch the edges of the window when resized.
-Responsive styles are available for [margin](./utilities/margin#responsive-margin), [padding](./utilities/padding#responsive-padding), [layout](./utilities/layout), [flexbox](.utilities/flexbox#responsive-flex-utilities), and the [grid](./objects/grid#responsive-grids) system.
+Responsive styles are available for [margin](../../utilities/margin/#responsive-margins), [padding](../../utilities/padding#responsive-padding), [layout](../../utilities/layout), [flexbox](../../utilities/flexbox#responsive-flex-utilities), and the [grid](../../objects/grid#responsive-grids) system.
## Breakpoint variables
diff --git a/modules/primer-support/docs/spacing.md b/modules/primer-support/docs/spacing.md
index b1a65e66..aa0fd332 100644
--- a/modules/primer-support/docs/spacing.md
+++ b/modules/primer-support/docs/spacing.md
@@ -19,9 +19,9 @@ The spacing scale is a **base-8** scale. We chose a base-8 scale because eight i
| $spacer-5 | 5 | 32px |
| $spacer-6 | 6 | 40px |
-These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](./utilities/margin) and [padding](./utilities/padding) utilities.
+These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](../../utilities/margin) and [padding](../../utilities/padding) utilities.
-See [primer-marketing-support](../primer-marketing-support) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](../primer-marketing-utilities/docs/margin.md) and [padding](../primer-marketing-utilities/docs/padding.md).
+See [primer-marketing-support](../../support/marketing-variables/) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](../../utilities/marketing-margin) and [padding](../../utilities/marketing-padding).
## Em-based spacing
Ems are used for spacing within components such as buttons and form elements. We stick to common fractions for em values (and powers of 2 where possible) so that , in combination with typography and line-height, the total height lands on sensible numbers.
diff --git a/modules/primer-support/docs/typography.md b/modules/primer-support/docs/typography.md
index efa51762..c6ae83fe 100644
--- a/modules/primer-support/docs/typography.md
+++ b/modules/primer-support/docs/typography.md
@@ -11,7 +11,7 @@ source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/
The typography scale is designed to work for GitHub's product UI and marketing sites. Font sizes are designed to work in combination with line-height values so as to result in more sensible numbers wherever possible.
-Font sizes are smaller on mobile and scale up at the `md` [breakpoint](#breakpoints) to be larger on desktop.
+Font sizes are smaller on mobile and scale up at the `md` [breakpoint](./../breakpoints) to be larger on desktop.
| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
| --- | --- | --- | --- | --- |
@@ -24,7 +24,7 @@ Font sizes are smaller on mobile and scale up at the `md` [breakpoint](#breakpoi
| 5 | 14px | 14px | 17.5 | 21 |
| 6 | 12px | 12px | 15 | 18 |
-The typography scale is used to create [typography utilities](./utilities/typography).
+The typography scale is used to create [typography utilities](../../utilities/typography).
## Typography variables
@@ -63,7 +63,7 @@ $lh-default: 1.5 !default;
```
## Typography Mixins
-Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](./utilities/typography#heading-utilities) which requires no additional CSS.
+Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](../../utilities/typography/#heading-utilities). which requires no additional CSS.
Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example:
diff --git a/modules/primer-support/package.json b/modules/primer-support/package.json
index 865b06ed..dd125b32 100644
--- a/modules/primer-support/package.json
+++ b/modules/primer-support/package.json
@@ -1,5 +1,5 @@
{
- "version": "4.5.2",
+ "version": "4.5.3",
"name": "primer-support",
"description": "Sass variables, mixins, and functions for use in our components.",
"homepage": "http://primer.github.io/",
diff --git a/modules/primer-table-object/package.json b/modules/primer-table-object/package.json
index 6f8a6add..6bc47ffc 100644
--- a/modules/primer-table-object/package.json
+++ b/modules/primer-table-object/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.4.5",
+ "version": "1.4.6",
"name": "primer-table-object",
"description": "A module for creating dynamically resizable elements that always sit on the same horizontal line.",
"homepage": "http://primer.github.io/",
@@ -29,7 +29,7 @@
"test": "../../script/npm-run-all build lint test-docs"
},
"dependencies": {
- "primer-support": "4.5.2"
+ "primer-support": "4.5.3"
},
"keywords": [
"primer",
diff --git a/modules/primer-tables/package.json b/modules/primer-tables/package.json
index 3c45f58e..7dd09c97 100644
--- a/modules/primer-tables/package.json
+++ b/modules/primer-tables/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.4.5",
+ "version": "1.4.6",
"name": "primer-tables",
"description": "Styles to display tabular data for marketing websites at GitHub.",
"homepage": "http://primer.github.io/",
@@ -28,8 +28,8 @@
"test": "../../script/npm-run-all build lint"
},
"dependencies": {
- "primer-marketing-support": "1.5.0",
- "primer-support": "4.5.2"
+ "primer-marketing-support": "1.5.1",
+ "primer-support": "4.5.3"
},
"keywords": [
"css",
diff --git a/modules/primer-tooltips/package.json b/modules/primer-tooltips/package.json
index eabdf41d..eb7e2a16 100644
--- a/modules/primer-tooltips/package.json
+++ b/modules/primer-tooltips/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.5.3",
+ "version": "1.5.4",
"name": "primer-tooltips",
"description": "Add tooltips built entirely in CSS to nearly any element.",
"homepage": "http://primer.github.io/",
@@ -29,7 +29,7 @@
"test": "../../script/npm-run-all build lint test-docs"
},
"dependencies": {
- "primer-support": "4.5.2"
+ "primer-support": "4.5.3"
},
"keywords": [
"primer",
diff --git a/modules/primer-truncate/package.json b/modules/primer-truncate/package.json
index e95bb80c..499e741b 100644
--- a/modules/primer-truncate/package.json
+++ b/modules/primer-truncate/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.4.5",
+ "version": "1.4.6",
"name": "primer-truncate",
"description": "Shorten text with an ellipsis.",
"homepage": "http://primer.github.io/",
@@ -29,7 +29,7 @@
"test": "../../script/npm-run-all build lint test-docs"
},
"dependencies": {
- "primer-support": "4.5.2"
+ "primer-support": "4.5.3"
},
"keywords": [
"primer",
diff --git a/modules/primer-utilities/docs/colors.md b/modules/primer-utilities/docs/colors.md
index d66842fb..a7f7fa51 100644
--- a/modules/primer-utilities/docs/colors.md
+++ b/modules/primer-utilities/docs/colors.md
@@ -13,7 +13,7 @@ Use color utilities to apply color to the background of elements, text, and bord
## Background colors
-Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can [check your color combination with this demo site](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](/styleguide/css/principles/accessibility).
+Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can [check your color combination with this demo site](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](/primer/principles/accessibility).
### Gray
@@ -127,10 +127,20 @@ Background colors are most commonly used for filling large blocks of content or
## Text colors
-Use text color utilities to set text or [octicons](/styleguide/css/styles/core/components/octicons) to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](/styleguide/css/principles/accessibility).
+Use text color utilities to set text or [octicons](/styleguide/css/styles/core/components/octicons) to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](/primer/principles/accessibility).
These are our most common text with background color combinations. They don't all pass accessibility standards currently, but will be updated in the future. **Any of the combinations with a warning icon must be used with caution**.
+### Text color inheritance
+
+You can set the color inheritance on an element by using the `text-inherit` class.
+
+```html
+
+ This text is purple,
including the link
+
+```
+
### Text on white background
```html
@@ -229,4 +239,4 @@ Use `link-hover-blue` to make any text color used with links to turn blue on hov
## Border colors
-Border colors are documented on the [border utilities page](/styleguide/css/styles/core/utilities/borders#border-width-style-and-color-utilities).
+Border colors are documented on the [border utilities page](../..//utilities/borders#border-width-style-and-color-utilities).
diff --git a/modules/primer-utilities/docs/flexbox.md b/modules/primer-utilities/docs/flexbox.md
index 653d57b7..4eb5d47a 100644
--- a/modules/primer-utilities/docs/flexbox.md
+++ b/modules/primer-utilities/docs/flexbox.md
@@ -576,7 +576,7 @@ Use these classes to adjust the alignment of an individual flex item on the cros
## Responsive flex utilities
-All flexbox utilities can be adjust per [breakpoint](/styleguide/css/modules/grid#breakpoints) using the following formulas:
+All flexbox utilities can be adjust per [breakpoint](../../objects/grid#breakpoints) using the following formulas:
- `d-[breakpoint]-[property]` for `display`
- `flex-[breakpoint]-[property]-[behavior]` for various flex properties
diff --git a/modules/primer-utilities/docs/layout.md b/modules/primer-utilities/docs/layout.md
index fd4aa356..cb2082dd 100644
--- a/modules/primer-utilities/docs/layout.md
+++ b/modules/primer-utilities/docs/layout.md
@@ -31,7 +31,7 @@ Adjust the display of an element with `.d-block`, `.d-none`, `.d-inline`, `.d-in
```
-There are known issues with using `display:table` and wrapping long strings, particularly in Firefox. You may need to use `table-fixed` on elements with `d-table` and apply column widths to table cells, which you can do with our [column width styles](/styleguide/css/modules/grid#column-widths).
+There are known issues with using `display:table` and wrapping long strings, particularly in Firefox. You may need to use `table-fixed` on elements with `d-table` and apply column widths to table cells, which you can do with our [column width styles](../../objects/grid#column-widths).
```html
@@ -45,7 +45,7 @@ There are known issues with using `display:table` and wrapping long strings, par
```
### Responsive display
-A selection of display utilities are able to be applied or changed per [breakpoint](/styleguide/css/modules/grid#breakpoints). `.d-block`, `.d-none`, `.d-inline`, and `.d-inline-block` are available as responsive utilities using the following formula: `d-[breakpoint]-[property]`. For example: `d-md-inline-block`. Each responsive display utility is applied to the specified breakpoint and up.
+A selection of display utilities are able to be applied or changed per [breakpoint](../../objects/grid#breakpoints). `.d-block`, `.d-none`, `.d-inline`, and `.d-inline-block` are available as responsive utilities using the following formula: `d-[breakpoint]-[property]`. For example: `d-md-inline-block`. Each responsive display utility is applied to the specified breakpoint and up.
In the following example, the `ul` element switches from `display: block` on mobile to `display: inline-block` at the `md` breakpoint, while the list items remain inline.
@@ -97,7 +97,7 @@ Use `.float-left` and `.float-right` to set floats, and `.clearfix` to clear.
```
### Responsive floats
-Float utilities can be applied or changed per [breakpoint](/styleguide/css/modules/grid#breakpoints). This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint.
+Float utilities can be applied or changed per [breakpoint](../../objects/grid#breakpoints). This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint.
Each responsive float utility is applied to the specified breakpoint and up, using the following formula: `float-[breakpoint]-[property]`. For example: `float-md-left`. Remember to use `.clearfix` to clear.
diff --git a/modules/primer-utilities/docs/margin.md b/modules/primer-utilities/docs/margin.md
index 7e8e61dd..351d1bf8 100644
--- a/modules/primer-utilities/docs/margin.md
+++ b/modules/primer-utilities/docs/margin.md
@@ -3,7 +3,7 @@ title: Margin
status: Stable
---
-Margin utilities are based on a global [spacing scale](/styleguide/css/styles/core/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
+Margin utilities are based on a global [spacing scale](../../support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
{:toc}
@@ -103,7 +103,7 @@ Reset margins built into typography elements or other components with `m-0`, `mt
## Responsive margins
-All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](/styleguide/css/modules/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
+All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](../../objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
```html
diff --git a/modules/primer-utilities/docs/padding.md b/modules/primer-utilities/docs/padding.md
index 7395e25f..2d996837 100644
--- a/modules/primer-utilities/docs/padding.md
+++ b/modules/primer-utilities/docs/padding.md
@@ -3,7 +3,7 @@ title: Padding
status: Stable
---
-Padding utilities are based on a global [spacing scale](/styleguide/css/styles/core/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.
+Padding utilities are based on a global [spacing scale](../../support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.
{:toc}
@@ -85,7 +85,7 @@ Use directional utilities to apply padding to an individual side, or the X and Y
## Responsive padding
-All padding utilities can be adjusted per [breakpoint](/styleguide/css/styles/core/support/breakpoints) using the following formula:
`p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
+All padding utilities can be adjusted per [breakpoint](../../support/breakpoints) using the following formula:
`p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
```html
@@ -99,7 +99,7 @@ All padding utilities can be adjusted per [breakpoint](/styleguide/css/styles/co
`.p-responsive` is a padding class that adds padding on the left and right sides of an element. On small screens, it gives the element padding of `$spacer-3`, on mid-sized screens it gives the element padding of `$spacer-6`, and on large screens, it gives the element padding of `$spacer-3`.
-It is intended to be used with [container styles](/styleguide/css/styles/core/objects/grid#containers)
+It is intended to be used with [container styles](../../objects/grid#containers)
```html
diff --git a/modules/primer-utilities/docs/typography.md b/modules/primer-utilities/docs/typography.md
index eb829726..8c22f13f 100644
--- a/modules/primer-utilities/docs/typography.md
+++ b/modules/primer-utilities/docs/typography.md
@@ -3,11 +3,11 @@ title: Typography
status: Stable
---
-Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/styleguide/css/styles/core/support/typography#typography-variables) that you can use in components or custom CSS.
+Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/primer/support/typography/#typography-variables) that you can use in components or custom CSS.
{:toc}
-Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/styleguide/css/styles/core/support/breakpoints) to be larger on desktop.
+Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/primer/support/breakpoints) to be larger on desktop.
| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
| --- | --- | --- | --- | --- |
@@ -93,6 +93,7 @@ Change the font weight, styles, and alignment with these utilities.
Emphasized
Small
Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.
+
Monospace
```
## Text alignment
diff --git a/modules/primer-utilities/lib/typography.scss b/modules/primer-utilities/lib/typography.scss
index f580f596..72f3ba9b 100644
--- a/modules/primer-utilities/lib/typography.scss
+++ b/modules/primer-utilities/lib/typography.scss
@@ -214,3 +214,8 @@
.text-shadow-light {
text-shadow: 0 1px 0 rgba($white, 0.5);
}
+
+/* Set to monospace font */
+.text-mono {
+ font-family: $mono-font;
+}
diff --git a/modules/primer-utilities/package.json b/modules/primer-utilities/package.json
index 692a156a..a6f8bd35 100644
--- a/modules/primer-utilities/package.json
+++ b/modules/primer-utilities/package.json
@@ -1,5 +1,5 @@
{
- "version": "4.9.0",
+ "version": "4.10.0",
"name": "primer-utilities",
"description": "Immutable, atomic CSS classes to rapidly build product",
"homepage": "http://primer.github.io/",
@@ -29,7 +29,7 @@
"test": "../../script/npm-run-all build lint"
},
"dependencies": {
- "primer-support": "4.5.2"
+ "primer-support": "4.5.3"
},
"keywords": [
"primer",
diff --git a/modules/primer-utilities/stories/Typography.js b/modules/primer-utilities/stories/Typography.js
index d618511a..c29b9b05 100644
--- a/modules/primer-utilities/stories/Typography.js
+++ b/modules/primer-utilities/stories/Typography.js
@@ -57,6 +57,7 @@ storiesOf('Typography utilities', module)
text-emphasized
text-small
lead
+
text-mono
))
.add('text alignment', () => (
diff --git a/modules/primer/package.json b/modules/primer/package.json
index 3e6d90aa..7b550c38 100644
--- a/modules/primer/package.json
+++ b/modules/primer/package.json
@@ -1,5 +1,5 @@
{
- "version": "10.4.0",
+ "version": "10.5.0",
"name": "primer",
"description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
"homepage": "http://primer.github.io/",
@@ -28,36 +28,37 @@
"test": "../../script/npm-run-all build lint"
},
"dependencies": {
- "primer-alerts": "1.5.5",
- "primer-avatars": "1.5.2",
- "primer-base": "1.7.0",
- "primer-blankslate": "1.4.5",
- "primer-box": "2.5.5",
- "primer-branch-name": "1.0.3",
- "primer-breadcrumb": "1.5.1",
- "primer-buttons": "2.5.3",
- "primer-core": "6.8.0",
- "primer-forms": "2.1.0",
- "primer-labels": "1.5.5",
- "primer-layout": "1.4.5",
- "primer-markdown": "3.7.5",
- "primer-marketing": "6.2.0",
- "primer-marketing-buttons": "1.0.4",
- "primer-marketing-support": "1.5.0",
- "primer-marketing-type": "1.4.5",
- "primer-marketing-utilities": "1.6.1",
- "primer-navigation": "1.5.3",
- "primer-page-headers": "1.4.5",
- "primer-page-sections": "1.4.5",
- "primer-popover": "0.0.6",
- "primer-product": "5.6.2",
- "primer-subhead": "1.0.3",
- "primer-support": "4.5.2",
- "primer-table-object": "1.4.5",
- "primer-tables": "1.4.5",
- "primer-tooltips": "1.5.3",
- "primer-truncate": "1.4.5",
- "primer-utilities": "4.9.0"
+ "primer-alerts": "1.5.6",
+ "primer-avatars": "1.5.3",
+ "primer-base": "1.7.1",
+ "primer-blankslate": "1.4.6",
+ "primer-box": "2.5.6",
+ "primer-branch-name": "1.0.4",
+ "primer-breadcrumb": "1.5.2",
+ "primer-buttons": "2.5.4",
+ "primer-core": "6.9.0",
+ "primer-forms": "2.1.1",
+ "primer-labels": "1.5.6",
+ "primer-layout": "1.4.6",
+ "primer-markdown": "3.7.6",
+ "primer-marketing": "6.2.1",
+ "primer-marketing-buttons": "1.0.5",
+ "primer-marketing-support": "1.5.1",
+ "primer-marketing-type": "1.4.6",
+ "primer-marketing-utilities": "1.6.2",
+ "primer-navigation": "1.5.4",
+ "primer-page-headers": "1.4.6",
+ "primer-page-sections": "1.4.6",
+ "primer-pagination": "1.0.0",
+ "primer-popover": "0.1.0",
+ "primer-product": "5.6.3",
+ "primer-subhead": "1.0.4",
+ "primer-support": "4.5.3",
+ "primer-table-object": "1.4.6",
+ "primer-tables": "1.4.6",
+ "primer-tooltips": "1.5.4",
+ "primer-truncate": "1.4.6",
+ "primer-utilities": "4.10.0"
},
"keywords": [
"primer",
diff --git a/tools/generator-primer-module/package.json b/tools/generator-primer-module/package.json
index 8aa61a3b..6113db68 100644
--- a/tools/generator-primer-module/package.json
+++ b/tools/generator-primer-module/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.0.4",
+ "version": "1.0.5",
"name": "generator-primer-module",
"description": "Use this to create a new Primer modules!",
"author": "GitHub, Inc.",
@@ -17,7 +17,7 @@
},
"dependencies": {
"chalk": "^2.1.0",
- "primer-support": "4.5.2",
+ "primer-support": "4.5.3",
"yeoman-generator": "^1.1.1"
},
"keywords": [
diff --git a/tools/stylelint-config-primer/package.json b/tools/stylelint-config-primer/package.json
index 738cd5f7..1c06c23d 100644
--- a/tools/stylelint-config-primer/package.json
+++ b/tools/stylelint-config-primer/package.json
@@ -1,6 +1,6 @@
{
"name": "stylelint-config-primer",
- "version": "2.2.5",
+ "version": "2.2.6",
"description": "Sharable stylelint config used by GitHub's CSS",
"homepage": "http://primer.github.io/",
"author": "GitHub, Inc.",
@@ -19,7 +19,7 @@
"stylelint-no-unsupported-browser-features": "^1.0.0",
"stylelint-order": "^0.4.4",
"stylelint-scss": "^1.4.1",
- "stylelint-selector-no-utility": "1.8.5"
+ "stylelint-selector-no-utility": "1.8.6"
},
"devDependencies": {
"eslint": "^3.19.0",
diff --git a/tools/stylelint-selector-no-utility/package.json b/tools/stylelint-selector-no-utility/package.json
index 19d01545..bc439246 100644
--- a/tools/stylelint-selector-no-utility/package.json
+++ b/tools/stylelint-selector-no-utility/package.json
@@ -1,6 +1,6 @@
{
"name": "stylelint-selector-no-utility",
- "version": "1.8.5",
+ "version": "1.8.6",
"description": "Stylelint rule that doesn't allow the styling of utility classes in CSS",
"main": "index.js",
"scripts": {
@@ -21,7 +21,7 @@
"license": "MIT",
"repository": "https://github.com/primer/primer/tree/master/tools/stylelint-selector-no-utility",
"dependencies": {
- "primer-utilities": "4.9.0",
+ "primer-utilities": "4.10.0",
"stylelint": "^7.13.0"
},
"devDependencies": {