primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-02 07:53:06 +03:00
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/release-13.0.0' into dropdown-menu-content

Browse Source
This commit is contained in:
Shawn Allen 2019-09-10 14:11:14 -07:00
commit 3a575bd5b8
22 changed files with 236 additions and 1349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.github/workflows/push.yml → .github/workflows/ci.yml vendored
View File

@ -1,5 +1,5 @@
name: "lint, test, publish" name: CI
on: [push] on: push
jobs: jobs:
all: all:
runs-on: ubuntu-latest runs-on: ubuntu-latest
@ -16,6 +16,9 @@ jobs:
run: npm --unsafe-perm test run: npm --unsafe-perm test
- name: prepublish - name: prepublish
run: script/prepublish run: script/prepublish
- name: test deprecations
if: startsWith(github.ref, 'refs/heads/release-')
run: script/test-deprecations.js
- uses: primer/publish@v1.1.0 - uses: primer/publish@v1.1.0
env: env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

2
.npmrc
View File

@ -1,3 +1 @@
save=true
save-exact=true
git-tag-version=false git-tag-version=false

19
deprecations.js
View File

@ -6,7 +6,19 @@
const versionDeprecations = { const versionDeprecations = {
'13.0.0': [ '13.0.0': [
{ {
selectors: ['.btn-purple'], selectors: [
'.btn-purple',
'.btn-purple:focus',
'.btn-purple.focus',
'.btn-purple:hover',
'.btn-purple.hover',
'.btn-purple:active',
'.btn-purple.selected',
'[open]>.btn-purple',
'.btn-purple:disabled',
'.btn-purple.disabled',
'.btn-purple .Counter'
],
message: `Please don't make purple buttons.` message: `Please don't make purple buttons.`
}, },
{ {
@ -19,7 +31,12 @@ const versionDeprecations = {
}, },
{ {
selectors: [ selectors: [
'.container',
'.container::before',
'.container::after',
'.columns', '.columns',
'.columns::before',
'.columns::after',
'.column', '.column',
'.one-third', '.one-third',
'.two-thirds', '.two-thirds',

26
docs-test/exceptions.js
View File

@ -1,26 +0,0 @@
const {yellow, green, red} = require('colorette')
/**
* Each exception type may resolve to either:
*
* 1. A string, which will be treated as a message listed alongside the
* "excepted" path; or
*
* 2. A function in the form: `f(paths) : {pass:Boolean, message:String}`
*
* In the case of `moved(path)`, it returns a _function_ that checks for
* whether the provided path exists in `paths` and returns the appropriate
* status object with `pass` and `message` props.
*/
module.exports = {
removed: red('removed'),
deprecated: yellow('deprecated'),
redirect: url => `${green('redirect')} → ${url}`,
moved: path => paths => {
if (paths.includes(path)) {
return {pass: true, message: `→ ${green(path)}`}
} else {
return {pass: false, message: `→ ${red(path)} is missing`}
}
}
}

80
docs-test/fixtures/path-cache.txt
View File

@ -1,80 +0,0 @@
/components
/components/alerts
/components/avatars
/components/blankslate
/components/box
/components/box-overlay
/components/boxed-groups
/components/branch-name
/components/breadcrumb
/components/buttons
/components/dropdown
/components/flash-banner
/components/forms
/components/labels
/components/markdown
/components/marketing-buttons
/components/navigation
/components/octicons
/components/page-headers
/components/page-sections
/components/pagehead
/components/pagination
/components/popover
/components/progress
/components/select-menu
/components/subhead
/components/tables
/components/tooltips
/components/truncate
/getting_started
/getting_started/contributing
/objects
/objects/grid
/objects/layout
/objects/table-object
/packages
/packages/primer
/packages/primer-core
/packages/primer-marketing
/packages/primer-product
/principles
/principles/HTML
/principles/SCSS
/principles/accessibility
/support
/support/breakpoints
/support/color-system
/support/marketing-variables
/support/spacing
/support/typography
/tools
/tools/atom-packages
/tools/docset
/tools/linting
/tools/local-primer
/tools/prototyping
/tools/sketch-templates
/tools/testing
/utilities
/utilities/animations
/utilities/borders
/utilities/box-shadow
/utilities/colors
/utilities/details
/utilities/flexbox
/utilities/layout
/utilities/margin
/utilities/marketing-borders
/utilities/marketing-filters
/utilities/marketing-layout
/utilities/marketing-margin
/utilities/marketing-padding
/utilities/marketing-type
/utilities/padding
/utilities/typography
/whats_new
/whats_new/changelog
/whats_new/changelog/archived_changelog
/whats_new/status-key

4
docs/content/components/buttons.md
View File

@ -59,7 +59,7 @@ Use `.btn-large` to increase the padding and border radius of a button. This is
```html live ```html live
<p> <p>
<a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a> <a class="btn btn-large" href="#url" role="button">Large link button</a>
<button class="btn btn-large" type="button">Large button button</button> <button class="btn btn-large" type="button">Large button button</button>
</p> </p>
``` ```
@ -68,7 +68,7 @@ Use `.btn-large` with a type scale utility to transform the text to a bigger siz
```html live ```html live
<p class="f3"> <p class="f3">
<a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a> <a class="btn btn-large" href="#url" role="button">Large link button</a>
<button class="btn btn-large btn-outline-blue" type="button">Large button button</button> <button class="btn btn-large btn-outline-blue" type="button">Large button button</button>
</p> </p>
``` ```

91
docs/content/objects/layout.md
View File

@ -1,91 +0,0 @@
---
title: Layout
path: objects/layout
status: Deprecated
status_issue: 'https://github.com/github/design-systems/issues/59'
source: 'https://github.com/primer/css/tree/master/src/layout'
bundle: layout
---
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`.
#### Container
Center your page's contents with a `.container`.
```html live title="Container"
<div class="container border">
Container
</div>
```
The container applies `width: 980px;` and uses horizontal `margin`s to center it.
#### Grid
##### How it works
The grid is pretty standard—you create rows with `.columns` and individual columns with a column class and fraction class. Here's how it works:
- Add a `.container` to encapsulate everything and provide ample horizontal gutter space.
- Create your outer row to clear the floated columns with `<div class="columns">`.
- Add your columns with individual `<div class="column">`s.
- Add your fractional width classes to set the width of the columns (e.g., `.one-fourth`).
##### Demo
In practice, your columns will look like the example below.
```html live title="Grid columns"
<div class="container">
<div class="columns mb-1">
<div class="one-fifth column block-blue p-3 border">
.one-fifth
</div>
<div class="four-fifths column block-blue p-3 border">
.four-fifths
</div>
</div>
<div class="columns mb-1">
<div class="one-fourth column block-blue p-3 border">
.one-fourth
</div>
<div class="three-fourths column block-blue p-3 border">
.three-fourths
</div>
</div>
<div class="columns mb-1">
<div class="one-third column block-blue p-3 border">
.one-third
</div>
<div class="two-thirds column block-blue p-3 border">
.two-thirds
</div>
</div>
<div class="columns">
<div class="one-half column block-blue p-3 border">
.one-half
</div>
<div class="one-half column block-blue p-3 border">
.one-half
</div>
</div>
</div>
```
##### Centered
Columns can be centered by adding `.centered` to the `.column` class.
```html live title="Grid centered"
<div class="columns">
<div class="one-half column centered block-blue border p-3">
.one-half
</div>
</div>
```

91
lib/erb-to-html.js
View File

@ -1,91 +0,0 @@
/* eslint-disable no-console */
const visit = require('unist-util-visit')
const cache = new Map()
const ERB_BLOCK_PATTERN = /<%=[^%]+%>/g
module.exports = options => {
const convert = converter(options)
return tree => {
visit(tree, 'code', node => {
const match = node.lang ? node.lang.match(/^[a-z]+/) : null
const lang = match ? match[0] : null
if (lang === 'erb' || lang === 'html') {
const erb = node.value
const html = convert(erb)
const remaining = html ? html.match(ERB_BLOCK_PATTERN) : null
if (html && !remaining) {
node.value = html
node.lang = node.lang.replace(/^erb/, 'html')
} else if (remaining) {
// console.warn(`Unable to convert ${remaining.length} ERB blocks:\n ${remaining.join(' \n')}`)
} else {
// console.warn(`No conversions made in: ${erb}`)
}
} else {
// console.warn(`Unknown code block lang: ${node.lang}`)
}
})
}
}
function converter({methods = {}}) {
return erb => {
const blocks = erb.match(ERB_BLOCK_PATTERN)
if (blocks && blocks.length) {
let html = erb
// console.warn(`Replacing ${blocks.length} ERB block(s)...`)
for (const block of blocks) {
const output = convert(block)
if (output !== block) {
// const count = html.split(block).length - 1
// console.warn(` found ${count} instances of "${block}"`)
html = replaceAll(html, block, output)
// console.warn(html)
}
}
return html
}
}
function convert(block) {
if (cache.has(block)) {
return cache.get(block)
}
// eslint-disable-next-line no-unused-vars
const [_, method, argString] = block.match(/<%= *(\w+)[ (]([^)]+)\)? *%>/)
const parts = argString.split(/, */)
const args = []
const kwargs = {}
let match
for (const part of parts) {
if ((match = part.match(/^:(.+) => (.+)$/))) {
kwargs[unquote(match[1])] = unquote(match[2])
} else if ((match = part.match(/^(.+): (.+)$/))) {
kwargs[unquote(match[1])] = unquote(match[2])
} else {
args.push(unquote(part))
}
}
if (typeof methods[method] === 'function') {
let output = methods[method](args, kwargs)
console.warn(`converted: ${block} -> ${output}`)
const escaped = block.replace('<', '').replace('>', '')
output = `<!--${escaped}-->\n${output}`
cache.set(block, output)
return output
} else {
console.warn(`No such ERB method implemented: "${method}"`)
return block
}
}
}
function replaceAll(str, input, output) {
return str.split(input).join(output)
}
function unquote(str) {
return str.replace(/^\s*"([^"]+)"\s*$/, (_, value) => value)
}

946
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@primer/css", "name": "@primer/css",
"version": "12.7.0", "version": "13.0.0",
"description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.", "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", "homepage": "https://primer.style/css",
"author": "GitHub, Inc.", "author": "GitHub, Inc.",
@ -23,14 +23,10 @@
}, },
"scripts": { "scripts": {
"fresh": "rm -rf node_modules; npm install", "fresh": "rm -rf node_modules; npm install",
"dist": "script/dist", "dist": "script/dist.js",
"check-links": "script/check-links http://localhost:3000/css -v",
"lint": "npm-run-all -s lint-css lint-js", "lint": "npm-run-all -s lint-css lint-js",
"lint-css": "stylelint --quiet --syntax scss src/**/*.scss", "lint-css": "stylelint --quiet --syntax scss src/**/*.scss",
"lint-js": "eslint script lib docs deprecations.js .storybook", "lint-js": "eslint script docs deprecations.js lib .storybook",
"now-build": "npm run dist && next build",
"now-start": "next start",
"now-test": "npm-run-all -s now-build now-start",
"postpublish": "script/postpublish", "postpublish": "script/postpublish",
"prepublishOnly": "script/prepublish", "prepublishOnly": "script/prepublish",
"publish-storybook": "script/publish-storybook", "publish-storybook": "script/publish-storybook",
@ -39,7 +35,7 @@
"start-storybook": "start-storybook -p 8001", "start-storybook": "start-storybook -p 8001",
"build-storybook": "build-storybook -o .storybuild", "build-storybook": "build-storybook -o .storybuild",
"test": "npm-run-all -s test-urls test-migrate", "test": "npm-run-all -s test-urls test-migrate",
"test-urls": "node docs-test/urls.js", "test-urls": "script/test-doc-urls.js",
"test-migrate": "script/test-migrate" "test-migrate": "script/test-migrate"
}, },
"dependencies": { "dependencies": {
@ -48,7 +44,6 @@
"devDependencies": { "devDependencies": {
"@storybook/addon-viewport": "5.0.11", "@storybook/addon-viewport": "5.0.11",
"@storybook/react": "5.0.11", "@storybook/react": "5.0.11",
"action-status": "0.1.1",
"autoprefixer": "9.4.7", "autoprefixer": "9.4.7",
"code-blocks": "^1.1.0", "code-blocks": "^1.1.0",
"colorette": "^1.0.7", "colorette": "^1.0.7",
@ -57,19 +52,13 @@
"details-dialog-element": "^1.4.0", "details-dialog-element": "^1.4.0",
"eslint": "4.19.1", "eslint": "4.19.1",
"eslint-plugin-github": "1.0.0", "eslint-plugin-github": "1.0.0",
"execa": "^0.10.0",
"filesize": "4.1.2", "filesize": "4.1.2",
"fs-extra": "^4.0.2", "fs-extra": "^4.0.2",
"fx": "11.0.1",
"gh-pages": "^1.0.0", "gh-pages": "^1.0.0",
"globby": "^6.1.0", "globby": "^6.1.0",
"hast-util-to-html": "^5.0.0",
"hast-util-to-string": "^1.0.1",
"klaw": "3.0.0", "klaw": "3.0.0",
"loader-utils": "^1.1.0",
"minimist": "1.2.0", "minimist": "1.2.0",
"node-fetch": "2.4.0", "node-fetch": "2.4.0",
"now": "^12.1.8",
"npm-run-all": "4.1.5", "npm-run-all": "4.1.5",
"postcss": "7.0.14", "postcss": "7.0.14",
"postcss-load-config": "2.0.0", "postcss-load-config": "2.0.0",
@ -77,21 +66,16 @@
"postcss-node-sass": "2.1.8", "postcss-node-sass": "2.1.8",
"postcss-scss": "2.0.0", "postcss-scss": "2.0.0",
"prop-types": "^15.6.2", "prop-types": "^15.6.2",
"raw-loader": "0.5.1",
"refractor": "^2.6.2",
"semver": "5.7.1", "semver": "5.7.1",
"style-loader": "^0.18.2", "style-loader": "^0.18.2",
"styled-components": "4.1.2", "styled-components": "4.1.2",
"stylelint": "9.10.1", "stylelint": "9.10.1",
"stylelint-config-primer": "7.0.1", "stylelint-config-primer": "7.0.1",
"table": "5.2.3", "table": "5.2.3",
"tar": "4.4.8",
"tree-model": "^1.0.7",
"typographic-base": "^1.0.4", "typographic-base": "^1.0.4",
"unified": "^7.1.0", "unified": "^7.1.0",
"unist-util-select": "^2.0.0", "unist-util-select": "^2.0.0",
"unist-util-stringify-position": "^2.0.0", "unist-util-stringify-position": "^2.0.0",
"unist-util-visit": "^1.4.0", "unist-util-visit": "^1.4.0"
"webpack": "4.20.2"
} }
} }

5
script/.eslintrc.json Normal file
View File

@ -0,0 +1,5 @@
{
"rules": {
"no-console": 0
}
}

6
script/bundle-size-report → script/bundle-size-report.js
View File

@ -35,9 +35,7 @@ if (ONLY_BUNDLES) {
const only = new Set(ONLY_BUNDLES.trim().split(/\s*,\s*/)) const only = new Set(ONLY_BUNDLES.trim().split(/\s*,\s*/))
bundles = bundles.filter(bundle => only.has(bundle.name)) bundles = bundles.filter(bundle => only.has(bundle.name))
} else if (!ALL_BUNDLES) { } else if (!ALL_BUNDLES) {
bundles = META_BUNDLES bundles = META_BUNDLES ? bundles.filter(isMetaBundle) : bundles.filter(bundle => !isMetaBundle(bundle))
? bundles.filter(isMetaBundle)
: bundles.filter(bundle => !isMetaBundle(bundle))
} }
Promise.all( Promise.all(
@ -50,7 +48,7 @@ Promise.all(
} }
return fetch(unpkgBaseURL + bundle.stats) return fetch(unpkgBaseURL + bundle.stats)
.then(res => res.json()) .then(res => res.json())
.catch(error => { .catch(() => {
console.warn(`Unable to fetch old "${bundle.name}" stats from unpkg; assuming it's new!`) console.warn(`Unable to fetch old "${bundle.name}" stats from unpkg; assuming it's new!`)
return cssstats('') return cssstats('')
}) })

2
script/check-relative-links → script/check-relative-links.js
View File

@ -4,7 +4,7 @@ const remark = require('remark-parse')
const stringify = require('remark-stringify') const stringify = require('remark-stringify')
const stringifyPosition = require('unist-util-stringify-position') const stringifyPosition = require('unist-util-stringify-position')
const unified = require('unified') const unified = require('unified')
const {green, yellow, red} = require('colorette') const {green, yellow} = require('colorette')
const {join} = require('path') const {join} = require('path')
const {readFile} = require('fs-extra') const {readFile} = require('fs-extra')
const {selectAll} = require('unist-util-select') const {selectAll} = require('unist-util-select')

0
script/dist → script/dist.js
View File

6
script/prepublish
View File

@ -7,12 +7,6 @@ npm run --silent dist
# run the bundle size and selector diff reports # run the bundle size and selector diff reports
script/run-reports script/run-reports
# TODO: remove this in v13
mkdir -p build
cp dist/primer.css build/build.css
cp dist/stats/primer.json build/build.json
echo "module.exports = {cssstats: require('./build.json')}" > build/index.js
files=$(git ls-files src | sed -e 's#^src/##' | sed -e 's#/.*$##' | sort -u) files=$(git ls-files src | sed -e 's#^src/##' | sed -e 's#/.*$##' | sort -u)
echo $files > publish-files.log echo $files > publish-files.log
cd src cd src

2
script/run-reports
View File

@ -2,7 +2,7 @@
set -e set -e
echo "Reporting bundle sizes..." echo "Reporting bundle sizes..."
script/bundle-size-report --all script/bundle-size-report.js --all
echo "Reporting selector diffs..." echo "Reporting selector diffs..."
script/selector-diff-report script/selector-diff-report

95
script/test-deprecations.js Executable file
View File

@ -0,0 +1,95 @@
#!/usr/bin/env node
const fetch = require('node-fetch')
const minimist = require('minimist')
const {basename} = require('path')
const {green, red, yellow} = require('colorette')
const {versionDeprecations} = require('../deprecations')
const X = red('𐄂')
const I = yellow('i')
const V = green('✓')
const args = minimist(process.argv.slice(2))
if (args.help) {
console.log(`
script/${basename(__filename)} [options]
--version <version> The published version of @primer/css from which to
fetch CSS selector stats; default: "latest".
--bundle <bundle> The CSS bundle to compare; default: "primer".
Fetches the CSS selectors for the published package and checks that:
1. All selectors listed in deprecations.js for the current local version (in
package.json) have been deleted.
2. All selectors deleted in the current local version have been listed in
deprecations.js.
If either check fails, the process exits with an error status (1).
`)
process.exit(0)
}
checkDeprecations(args)
async function checkDeprecations(options = {}) {
const {bundle = 'primer', version = 'latest'} = options
const currentVersion = require('../package.json').version
const statsPath = `dist/stats/${bundle}.json`
const local = require(`../${statsPath}`)
const remote = await fetch(`https://unpkg.com/@primer/css@${version}/${statsPath}`).then(res => res.json())
const {changed, added, removed} = diffLists(remote.selectors.values, local.selectors.values)
if (changed === 0) {
console.log(`no selectors added or removed in bundle "${bundle}"`)
return
}
const deprecations = versionDeprecations[currentVersion] || []
const deprecatedSelectors = deprecations.reduce((list, deprecation) => list.concat(deprecation.selectors), [])
console.log(`${I} ${removed.length} selectors removed locally (compared with ${version})`)
console.log(`${I} ${deprecatedSelectors.length} selectors deprecated in v${currentVersion}`)
if (added.length) {
console.log(`${I} ${added.length} selectors added`)
}
const errors = []
for (const deprecation of deprecations) {
for (const selector of deprecation.selectors) {
if (!removed.includes(selector)) {
const error = `"${selector}" deprecated, but not removed`
errors.push(error)
console.log(`${X} ${error}`)
} else {
console.log(`${V} "${selector}" is officially deprecated`)
}
deprecatedSelectors.push(selector)
}
}
for (const removedSelector of removed) {
if (!deprecatedSelectors.includes(removedSelector)) {
const error = `"${removedSelector}" has been removed, but was not listed in versionDeprecations['${currentVersion}']`
errors.push(error)
console.log(`${X} ${error}`)
} else {
// console.log(`${V} "${removedSelector}" removed and deprecated!`)
}
}
if (errors.length) {
process.exitCode = 1
}
}
function diffLists(before, after) {
const added = after.filter(value => !before.includes(value))
const removed = before.filter(value => !after.includes(value))
return {
changed: added.length + removed.length,
added,
removed
}
}

158
docs-test/urls.js → script/test-doc-urls.js Normal file → Executable file
View File

@ -1,10 +1,18 @@
const execa = require('execa') #!/usr/bin/env node
const klaw = require('klaw') const klaw = require('klaw')
const {basename, dirname, join, resolve} = require('path') const {join} = require('path')
const {promisify} = require('util')
const {readFile, writeFile} = require('fs-extra')
const {bold, yellow, green, red} = require('colorette') const {bold, yellow, green, red} = require('colorette')
const {deprecated, moved, redirect, removed} = require('./exceptions')
const deprecated = yellow('deprecated')
const moved = path => paths => {
if (paths.includes(path)) {
return {pass: true, message: `→ ${green(path)}`}
} else {
return {pass: false, message: `→ ${red(path)} is missing`}
}
}
const redirect = url => `${green('redirect')} → ${url}`
const removed = red('removed')
/** /**
* This is where we track "exceptions" to paths that don't have 1:1 matches * This is where we track "exceptions" to paths that don't have 1:1 matches
@ -24,6 +32,7 @@ const exceptions = {
'/components/tables': deprecated, '/components/tables': deprecated,
'/getting_started': moved('/getting-started/contributing'), '/getting_started': moved('/getting-started/contributing'),
'/getting_started/contributing': moved('/getting-started/contributing'), '/getting_started/contributing': moved('/getting-started/contributing'),
'/objects/layout': removed,
'/packages': removed, '/packages': removed,
'/packages/primer': removed, '/packages/primer': removed,
'/packages/primer-core': removed, '/packages/primer-core': removed,
@ -35,16 +44,11 @@ const exceptions = {
'/whats_new': redirect('https://github.com/primer/primer/releases'), '/whats_new': redirect('https://github.com/primer/primer/releases'),
'/whats_new/changelog': removed, '/whats_new/changelog': removed,
'/whats_new/changelog/archived_changelog': removed, '/whats_new/changelog/archived_changelog': removed,
'/whats_new/status-key': moved('/status-key') '/whats_new/status-key': redirect('https://primer.style/doctocat/usage/front-matter#status')
} }
const log = console.warn const log = console.warn
const STYLEGUIDE_ROOT = join(__dirname, '../../../../github/styleguide')
const CACHE_FILE = join(__dirname, 'fixtures/path-cache.txt')
const {CI} = process.env
const CLEAN = process.argv.slice(2).includes('--clean')
Promise.all([getStyleguidePaths(), getLocalPaths()]) Promise.all([getStyleguidePaths(), getLocalPaths()])
.then(([before, after]) => { .then(([before, after]) => {
log(`Found ${before.length} paths in github/styleguide, ${after.length} here.\n`) log(`Found ${before.length} paths in github/styleguide, ${after.length} here.\n`)
@ -93,51 +97,99 @@ Promise.all([getStyleguidePaths(), getLocalPaths()])
}) })
function getStyleguidePaths() { function getStyleguidePaths() {
if (CI) { return `
return readLines(CACHE_FILE) /components
} /components/alerts
return buildStyleguide() /components/avatars
.then(getPathsFromStyleguide) /components/blankslate
.then(writeLines(CACHE_FILE)) /components/box
.catch(error => { /components/box-overlay
/* /components/boxed-groups
* If _anything_ goes wrong (on CI, no styleguide repo), just get the list /components/branch-name
* of paths from the committed file. /components/breadcrumb
*/ /components/buttons
log(`${yellow('!!!')} Unable to get styleguide paths:\n\n ${error}\n`) /components/dropdown
log(`Using the paths in ${CACHE_FILE} instead...\n`) /components/flash-banner
return readLines(CACHE_FILE) /components/forms
}) /components/labels
} /components/markdown
/components/marketing-buttons
function buildStyleguide() { /components/navigation
if (CLEAN) { /components/octicons
const cwd = STYLEGUIDE_ROOT /components/page-headers
return pathExists(cwd).then(exists => { /components/page-sections
if (exists) { /components/pagehead
return execa('script/bootstrap', {cwd}).then(() => execa('npm', ['run', 'build-site'], {cwd})) /components/pagination
} else { /components/popover
throw new Error(`The styleguide root (${cwd}) doesn't exist`) /components/progress
} /components/select-menu
}) /components/subhead
} /components/tables
return Promise.resolve(true) /components/tooltips
} /components/truncate
/getting_started
function getPathsFromStyleguide() { /getting_started/contributing
return getPaths(join(STYLEGUIDE_ROOT, '_site/primer')) /objects
.then(paths => paths.filter(path => !path.includes('code_example.html'))) /objects/grid
.then(normalizePaths) /objects/layout
/objects/table-object
/packages
/packages/primer
/packages/primer-core
/packages/primer-marketing
/packages/primer-product
/principles
/principles/HTML
/principles/SCSS
/principles/accessibility
/support
/support/breakpoints
/support/color-system
/support/marketing-variables
/support/spacing
/support/typography
/tools
/tools/atom-packages
/tools/docset
/tools/linting
/tools/local-primer
/tools/prototyping
/tools/sketch-templates
/tools/testing
/utilities
/utilities/animations
/utilities/borders
/utilities/box-shadow
/utilities/colors
/utilities/details
/utilities/flexbox
/utilities/layout
/utilities/margin
/utilities/marketing-borders
/utilities/marketing-filters
/utilities/marketing-layout
/utilities/marketing-margin
/utilities/marketing-padding
/utilities/marketing-type
/utilities/padding
/utilities/typography
/whats_new
/whats_new/changelog
/whats_new/changelog/archived_changelog
/whats_new/status-key
`
.trim()
.split('\n')
} }
function getLocalPaths() { function getLocalPaths() {
return getPaths(join(__dirname, '../pages/css')).then(normalizePaths) return getPaths(join(__dirname, '../docs/content')).then(normalizePaths)
} }
function getPaths(dir, options) { function getPaths(dir) {
const paths = [] const paths = []
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
klaw(dir, options) klaw(dir)
.on('data', item => paths.push(item.path.substr(dir.length))) .on('data', item => paths.push(item.path.substr(dir.length)))
.on('error', reject) .on('error', reject)
.on('end', () => { .on('end', () => {
@ -147,14 +199,6 @@ function getPaths(dir, options) {
}) })
} }
function readLines(filename) {
return readFile(filename, 'utf8').then(str => str.trim().split(/[\r\n]+/))
}
function writeLines(filename) {
return lines => writeFile(filename, lines.join('\n'), 'utf8').then(() => lines)
}
function normalizePaths(paths) { function normalizePaths(paths) {
const normal = paths.map(path => path.replace(/(\/index)?\.([a-z]+)$/, '')) const normal = paths.map(path => path.replace(/(\/index)?\.([a-z]+)$/, ''))
return unique(normal).sort() return unique(normal).sort()

2
src/buttons/button.scss
View File

@ -60,8 +60,6 @@
.btn { @include btn-solid($text-gray-dark, $gray-000, darken($gray-100, 2%)); } .btn { @include btn-solid($text-gray-dark, $gray-000, darken($gray-100, 2%)); }
.btn-primary { @include btn-solid($text-white, $green-400, $green-500); } .btn-primary { @include btn-solid($text-white, $green-400, $green-500); }
@warn ".btn-purple will be removed in 13.0.0. Please don't make buttons purple.";
.btn-purple { @include btn-solid($text-white, lighten($purple-500, 5%), darken($purple-500, 5%)); }
.btn-blue { @include btn-solid($text-white, lighten($blue-500, 8%), darken($blue-500, 2%)); } .btn-blue { @include btn-solid($text-white, lighten($blue-500, 8%), darken($blue-500, 2%)); }
.btn-danger { @include btn-inverse($red-600, $gray-000, darken($gray-100, 2%)); } .btn-danger { @include btn-inverse($red-600, $gray-000, darken($gray-100, 2%)); }

8
src/layout/container.scss
View File

@ -1,12 +1,4 @@
// Fixed-width, centered column for site content. // Fixed-width, centered column for site content.
// This will be deprecated and replaced with container-lg in future
.container {
width: $container-width;
margin-right: auto;
margin-left: auto;
@include clearfix;
}
// Handy container styles that match our breakpoints // Handy container styles that match our breakpoints
// 544px // 544px

1
src/layout/index.scss
View File

@ -1,5 +1,4 @@
@import "../support/index.scss"; @import "../support/index.scss";
@import "./container.scss"; @import "./container.scss";
@import "./columns.scss";
@import "./grid.scss"; @import "./grid.scss";
@import "./grid-offset.scss"; @import "./grid-offset.scss";

8
src/utilities/colors.scss
View File

@ -2,8 +2,6 @@
// stylelint-disable primer/selector-no-utility // stylelint-disable primer/selector-no-utility
// stylelint-disable block-opening-brace-space-before, comment-empty-line-before // stylelint-disable block-opening-brace-space-before, comment-empty-line-before
@warn ".text-pending and .bg-pending will be deprecated in 13.0.0. Use .text-yellow and .bg-yellow-dark instead";
// background colors // background colors
/* Set the background to $bg-white */ /* Set the background to $bg-white */
.bg-white { background-color: $bg-white !important; } .bg-white { background-color: $bg-white !important; }
@ -80,12 +78,6 @@
/* Set the text color to inherit */ /* Set the text color to inherit */
.text-inherit { color: inherit !important; } .text-inherit { color: inherit !important; }
// Pending states
// This will be deprecated in the future, use .text-yellow instead
.text-pending { color: $yellow-800 !important; }
// This will be deprecated in the future, use .bg-yellow-dark instead
.bg-pending { color: $yellow-700 !important; }
// Link colors // Link colors
// Sets the links color to $text-gray and $text-blue on hover // Sets the links color to $text-gray and $text-blue on hover
.link-gray { .link-gray {