jekyll-theme-primer 0.5.2 → 0.5.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/LICENSE.md +1 -1
- data/README.md +3 -4
- data/_layouts/default.html +15 -4
- data/_sass/primer-base/LICENSE +1 -1
- data/_sass/primer-base/README.md +6 -6
- data/_sass/primer-base/build/build.css +1 -1
- data/_sass/primer-base/build/index.js +1 -1
- data/_sass/primer-base/lib/base.scss +11 -0
- data/_sass/primer-base/lib/normalize.scss +1 -3
- data/_sass/primer-base/package.json +25 -20
- data/_sass/primer-layout/LICENSE +1 -1
- data/_sass/primer-layout/README.md +12 -12
- data/_sass/primer-layout/docs/grid.md +392 -0
- data/_sass/primer-layout/package.json +27 -21
- data/_sass/primer-markdown/LICENSE +1 -1
- data/_sass/primer-markdown/README.md +6 -6
- data/_sass/primer-markdown/build/build.css +1 -1
- data/_sass/primer-markdown/build/index.js +1 -1
- data/_sass/primer-markdown/lib/code.scss +3 -16
- data/_sass/primer-markdown/lib/lists.scss +5 -1
- data/_sass/primer-markdown/lib/markdown-body.scss +1 -1
- data/_sass/primer-markdown/package.json +23 -18
- data/_sass/primer-support/LICENSE +1 -1
- data/_sass/primer-support/README.md +20 -6
- data/_sass/primer-support/docs/breakpoints.md +60 -0
- data/_sass/primer-support/docs/color-system.md +392 -0
- data/_sass/primer-support/docs/spacing.md +40 -0
- data/_sass/primer-support/docs/typography.md +90 -0
- data/_sass/primer-support/lib/mixins/buttons.scss +13 -9
- data/_sass/primer-support/lib/variables/layout.scss +8 -0
- data/_sass/primer-support/lib/variables/misc.scss +1 -1
- data/_sass/primer-support/package.json +25 -18
- data/_sass/primer-utilities/LICENSE +1 -1
- data/_sass/primer-utilities/README.md +6 -6
- data/_sass/primer-utilities/build/build.css +1 -1
- data/_sass/primer-utilities/build/index.js +1 -1
- data/_sass/primer-utilities/docs/animations.md +75 -0
- data/_sass/primer-utilities/docs/borders.md +127 -0
- data/_sass/primer-utilities/docs/box-shadow.md +107 -0
- data/_sass/primer-utilities/docs/colors.md +232 -0
- data/_sass/primer-utilities/docs/flexbox.md +665 -0
- data/_sass/primer-utilities/docs/layout.md +300 -0
- data/_sass/primer-utilities/docs/margin.md +126 -0
- data/_sass/primer-utilities/docs/padding.md +110 -0
- data/_sass/primer-utilities/docs/typography.md +138 -0
- data/_sass/primer-utilities/lib/animations.scss +32 -2
- data/_sass/primer-utilities/lib/borders.scss +2 -0
- data/_sass/primer-utilities/lib/layout.scss +7 -3
- data/_sass/primer-utilities/package.json +27 -21
- metadata +54 -42
- data/assets/javascript/anchor-js/.eslintrc +0 -77
- data/assets/javascript/anchor-js/.gitattributes +0 -2
- data/assets/javascript/anchor-js/.npmignore +0 -4
- data/assets/javascript/anchor-js/.travis.yml +0 -6
- data/assets/javascript/anchor-js/anchor.js +0 -334
- data/assets/javascript/anchor-js/anchor.min.js +0 -6
- data/assets/javascript/anchor-js/banner.js +0 -17
- data/assets/javascript/anchor-js/docs/anchor.js +0 -334
- data/assets/javascript/anchor-js/docs/favicon.ico +0 -0
- data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.eot +0 -0
- data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.svg +0 -11
- data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.ttf +0 -0
- data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.woff +0 -0
- data/assets/javascript/anchor-js/docs/fonts/fonts.css +0 -24
- data/assets/javascript/anchor-js/docs/grunticon/grunticon.loader.js +0 -3
- data/assets/javascript/anchor-js/docs/grunticon/icons.data.png.css +0 -5
- data/assets/javascript/anchor-js/docs/grunticon/icons.data.svg.css +0 -5
- data/assets/javascript/anchor-js/docs/grunticon/icons.fallback.css +0 -5
- data/assets/javascript/anchor-js/docs/grunticon/png/grunticon-link.png +0 -0
- data/assets/javascript/anchor-js/docs/img/anchoring-links.png +0 -0
- data/assets/javascript/anchor-js/docs/img/anchorjs_logo.png +0 -0
- data/assets/javascript/anchor-js/docs/img/anchorlinks2.png +0 -0
- data/assets/javascript/anchor-js/docs/img/gh-link.svg +0 -9
- data/assets/javascript/anchor-js/docs/img/gh_link.svg +0 -9
- data/assets/javascript/anchor-js/docs/img/hyperlink.svg +0 -9
- data/assets/javascript/anchor-js/docs/img/link.svg +0 -6
- data/assets/javascript/anchor-js/docs/img/mini-logo.png +0 -0
- data/assets/javascript/anchor-js/docs/img/primer-md.png +0 -0
- data/assets/javascript/anchor-js/docs/scripts.js +0 -12
- data/assets/javascript/anchor-js/docs/styles.css +0 -493
|
@@ -1,65 +1,71 @@
|
|
|
1
1
|
{
|
|
2
|
-
"_from": "primer-layout@1.
|
|
3
|
-
"_id": "primer-layout@1.
|
|
2
|
+
"_from": "primer-layout@1.4.5",
|
|
3
|
+
"_id": "primer-layout@1.4.5",
|
|
4
4
|
"_inBundle": false,
|
|
5
|
-
"_integrity": "sha1-
|
|
5
|
+
"_integrity": "sha1-b83KZw7wv1xCir6L6GSdg8UeeW8=",
|
|
6
6
|
"_location": "/primer-layout",
|
|
7
7
|
"_phantomChildren": {},
|
|
8
8
|
"_requested": {
|
|
9
9
|
"type": "version",
|
|
10
10
|
"registry": true,
|
|
11
|
-
"raw": "primer-layout@1.
|
|
11
|
+
"raw": "primer-layout@1.4.5",
|
|
12
12
|
"name": "primer-layout",
|
|
13
13
|
"escapedName": "primer-layout",
|
|
14
|
-
"rawSpec": "1.
|
|
14
|
+
"rawSpec": "1.4.5",
|
|
15
15
|
"saveSpec": null,
|
|
16
|
-
"fetchSpec": "1.
|
|
16
|
+
"fetchSpec": "1.4.5"
|
|
17
17
|
},
|
|
18
18
|
"_requiredBy": [
|
|
19
19
|
"#USER",
|
|
20
20
|
"/"
|
|
21
21
|
],
|
|
22
|
-
"_resolved": "https://registry.npmjs.org/primer-layout/-/primer-layout-1.
|
|
23
|
-
"_shasum": "
|
|
24
|
-
"_spec": "primer-layout@1.
|
|
25
|
-
"_where": "/Users/benbalter/projects/primer",
|
|
22
|
+
"_resolved": "https://registry.npmjs.org/primer-layout/-/primer-layout-1.4.5.tgz",
|
|
23
|
+
"_shasum": "6fcdca670ef0bf5c428abe8be8649d83c51e796f",
|
|
24
|
+
"_spec": "primer-layout@1.4.5",
|
|
25
|
+
"_where": "/Users/benbalter/projects/pages-themes/primer",
|
|
26
26
|
"author": {
|
|
27
27
|
"name": "GitHub, Inc."
|
|
28
28
|
},
|
|
29
29
|
"bugs": {
|
|
30
|
-
"url": "https://github.com/primer/primer
|
|
30
|
+
"url": "https://github.com/primer/primer/issues"
|
|
31
31
|
},
|
|
32
32
|
"bundleDependencies": false,
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"primer-support": "
|
|
34
|
+
"primer-support": "4.5.2"
|
|
35
35
|
},
|
|
36
36
|
"deprecated": false,
|
|
37
37
|
"description": "Containers, rows, and columns for creating page layout.",
|
|
38
38
|
"files": [
|
|
39
39
|
"index.scss",
|
|
40
40
|
"lib",
|
|
41
|
-
"build"
|
|
41
|
+
"build",
|
|
42
|
+
"docs"
|
|
42
43
|
],
|
|
43
|
-
"homepage": "http://
|
|
44
|
+
"homepage": "http://primer.github.io/",
|
|
44
45
|
"keywords": [
|
|
45
46
|
"primer",
|
|
46
47
|
"css",
|
|
47
48
|
"github",
|
|
48
|
-
"
|
|
49
|
+
"design-system"
|
|
49
50
|
],
|
|
50
51
|
"license": "MIT",
|
|
51
52
|
"main": "build/index.js",
|
|
52
53
|
"name": "primer-layout",
|
|
54
|
+
"primer": {
|
|
55
|
+
"category": "core",
|
|
56
|
+
"module_type": "objects"
|
|
57
|
+
},
|
|
53
58
|
"repository": {
|
|
54
59
|
"type": "git",
|
|
55
|
-
"url": "https://github.com/primer/primer
|
|
60
|
+
"url": "https://github.com/primer/primer/tree/master/modules/primer-layout"
|
|
56
61
|
},
|
|
62
|
+
"sass": "index.scss",
|
|
57
63
|
"scripts": {
|
|
58
|
-
"build": "primer-module-build index.scss",
|
|
59
|
-
"lint": "
|
|
64
|
+
"build": "../../script/npm-run primer-module-build index.scss",
|
|
65
|
+
"lint": "../../script/lint-scss",
|
|
60
66
|
"prepare": "npm run build",
|
|
61
|
-
"test": "npm-run-all
|
|
67
|
+
"test": "../../script/npm-run-all build lint"
|
|
62
68
|
},
|
|
63
|
-
"style": "
|
|
64
|
-
"version": "1.
|
|
69
|
+
"style": "build/build.css",
|
|
70
|
+
"version": "1.4.5"
|
|
65
71
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
# Primer
|
|
1
|
+
# Primer Markdown
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.org/package/primer-markdown)
|
|
4
|
+
[](https://travis-ci.org/primer/primer)
|
|
5
5
|
|
|
6
6
|
> Stylesheets for rendering GitHub Flavored Markdown and syntax highlighted code snippets.
|
|
7
7
|
|
|
8
|
-
This repository is a module of the full [primer
|
|
8
|
+
This repository is a module of the full [primer][primer] repository.
|
|
9
9
|
|
|
10
10
|
## Install
|
|
11
11
|
|
|
@@ -211,8 +211,8 @@ This is the final element on the page and there should be no margin below this.
|
|
|
211
211
|
|
|
212
212
|
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
|
213
213
|
|
|
214
|
-
[primer
|
|
215
|
-
[docs]: http://
|
|
214
|
+
[primer]: https://github.com/primer/primer
|
|
215
|
+
[docs]: http://primer.github.io/
|
|
216
216
|
[npm]: https://www.npmjs.com/
|
|
217
217
|
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
|
218
218
|
[sass]: http://sass-lang.com/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.markdown-body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:16px;line-height:1.5;word-wrap:break-word}.markdown-body::before{display:table;content:""}.markdown-body::after{display:table;clear:both;content:""}.markdown-body>*:first-child{margin-top:0 !important}.markdown-body>*:last-child{margin-bottom:0 !important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body .absent{color:#cb2431}.markdown-body .anchor{float:left;padding-right:4px;margin-left:-20px;line-height:1}.markdown-body .anchor:focus{outline:none}.markdown-body p,.markdown-body blockquote,.markdown-body ul,.markdown-body ol,.markdown-body dl,.markdown-body table,.markdown-body pre{margin-top:0;margin-bottom:16px}.markdown-body hr{height
|
|
1
|
+
.markdown-body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:16px;line-height:1.5;word-wrap:break-word}.markdown-body::before{display:table;content:""}.markdown-body::after{display:table;clear:both;content:""}.markdown-body>*:first-child{margin-top:0 !important}.markdown-body>*:last-child{margin-bottom:0 !important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body .absent{color:#cb2431}.markdown-body .anchor{float:left;padding-right:4px;margin-left:-20px;line-height:1}.markdown-body .anchor:focus{outline:none}.markdown-body p,.markdown-body blockquote,.markdown-body ul,.markdown-body ol,.markdown-body dl,.markdown-body table,.markdown-body pre{margin-top:0;margin-bottom:16px}.markdown-body hr{height:.25em;padding:0;margin:24px 0;background-color:#e1e4e8;border:0}.markdown-body blockquote{padding:0 1em;color:#6a737d;border-left:0.25em solid #dfe2e5}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body kbd{display:inline-block;padding:3px 5px;font-size:11px;line-height:10px;color:#444d56;vertical-align:middle;background-color:#fafbfc;border:solid 1px #c6cbd1;border-bottom-color:#959da5;border-radius:3px;box-shadow:inset 0 -1px 0 #959da5}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.markdown-body h1 .octicon-link,.markdown-body h2 .octicon-link,.markdown-body h3 .octicon-link,.markdown-body h4 .octicon-link,.markdown-body h5 .octicon-link,.markdown-body h6 .octicon-link{color:#1b1f23;vertical-align:middle;visibility:hidden}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}.markdown-body h1:hover .anchor .octicon-link,.markdown-body h2:hover .anchor .octicon-link,.markdown-body h3:hover .anchor .octicon-link,.markdown-body h4:hover .anchor .octicon-link,.markdown-body h5:hover .anchor .octicon-link,.markdown-body h6:hover .anchor .octicon-link{visibility:visible}.markdown-body h1 tt,.markdown-body h1 code,.markdown-body h2 tt,.markdown-body h2 code,.markdown-body h3 tt,.markdown-body h3 code,.markdown-body h4 tt,.markdown-body h4 code,.markdown-body h5 tt,.markdown-body h5 code,.markdown-body h6 tt,.markdown-body h6 code{font-size:inherit}.markdown-body h1{padding-bottom:0.3em;font-size:2em;border-bottom:1px solid #eaecef}.markdown-body h2{padding-bottom:0.3em;font-size:1.5em;border-bottom:1px solid #eaecef}.markdown-body h3{font-size:1.25em}.markdown-body h4{font-size:1em}.markdown-body h5{font-size:0.875em}.markdown-body h6{font-size:0.85em;color:#6a737d}.markdown-body ul,.markdown-body ol{padding-left:2em}.markdown-body ul.no-list,.markdown-body ol.no-list{padding:0;list-style-type:none}.markdown-body ul ul,.markdown-body ul ol,.markdown-body ol ol,.markdown-body ol ul{margin-top:0;margin-bottom:0}.markdown-body li{word-wrap:break-all}.markdown-body li>p{margin-top:16px}.markdown-body li+li{margin-top:.25em}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:600}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}.markdown-body table{display:block;width:100%;overflow:auto}.markdown-body table th{font-weight:600}.markdown-body table th,.markdown-body table td{padding:6px 13px;border:1px solid #dfe2e5}.markdown-body table tr{background-color:#fff;border-top:1px solid #c6cbd1}.markdown-body table tr:nth-child(2n){background-color:#f6f8fa}.markdown-body table img{background-color:transparent}.markdown-body img{max-width:100%;box-sizing:content-box;background-color:#fff}.markdown-body img[align=right]{padding-left:20px}.markdown-body img[align=left]{padding-right:20px}.markdown-body .emoji{max-width:none;vertical-align:text-top;background-color:transparent}.markdown-body span.frame{display:block;overflow:hidden}.markdown-body span.frame>span{display:block;float:left;width:auto;padding:7px;margin:13px 0 0;overflow:hidden;border:1px solid #dfe2e5}.markdown-body span.frame span img{display:block;float:left}.markdown-body span.frame span span{display:block;padding:5px 0 0;clear:both;color:#24292e}.markdown-body span.align-center{display:block;overflow:hidden;clear:both}.markdown-body span.align-center>span{display:block;margin:13px auto 0;overflow:hidden;text-align:center}.markdown-body span.align-center span img{margin:0 auto;text-align:center}.markdown-body span.align-right{display:block;overflow:hidden;clear:both}.markdown-body span.align-right>span{display:block;margin:13px 0 0;overflow:hidden;text-align:right}.markdown-body span.align-right span img{margin:0;text-align:right}.markdown-body span.float-left{display:block;float:left;margin-right:13px;overflow:hidden}.markdown-body span.float-left span{margin:13px 0 0}.markdown-body span.float-right{display:block;float:right;margin-left:13px;overflow:hidden}.markdown-body span.float-right>span{display:block;margin:13px auto 0;overflow:hidden;text-align:right}.markdown-body code,.markdown-body tt{padding:0.2em 0.4em;margin:0;font-size:85%;background-color:rgba(27,31,35,0.05);border-radius:3px}.markdown-body code br,.markdown-body tt br{display:none}.markdown-body del code{text-decoration:inherit}.markdown-body pre{word-wrap:normal}.markdown-body pre>code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:transparent;border:0}.markdown-body .highlight{margin-bottom:16px}.markdown-body .highlight pre{margin-bottom:0;word-break:normal}.markdown-body .highlight pre,.markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f6f8fa;border-radius:3px}.markdown-body pre code,.markdown-body pre tt{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.markdown-body .csv-data td,.markdown-body .csv-data th{padding:5px;overflow:hidden;font-size:12px;line-height:1;text-align:left;white-space:nowrap}.markdown-body .csv-data .blob-num{padding:10px 8px 9px;text-align:right;background:#fff;border:0}.markdown-body .csv-data tr{border-top:0}.markdown-body .csv-data th{font-weight:600;background:#f6f8fa;border-top:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports = {"cssstats":{"size":
|
|
1
|
+
module.exports = {"cssstats":{"size":6460,"gzipSize":1568,"humanizedSize":"6kB","humanizedGzipSize":"2kB","rules":{"total":72,"size":{"graph":[4,2,3,1,1,2,1,4,1,2,5,3,1,1,11,4,3,1,1,1,3,3,1,1,1,2,1,2,2,1,1,1,1,5,2,3,1,2,2,1,1,3,1,1,3,2,7,2,4,3,4,2,3,4,2,4,1,4,4,5,1,1,1,7,1,2,6,9,6,4,1,3],"max":11,"average":2.638888888888889}},"selectors":{"total":120,"type":109,"class":120,"id":0,"pseudoClass":19,"pseudoElement":2,"values":[".markdown-body",".markdown-body::before",".markdown-body::after",".markdown-body>*:first-child",".markdown-body>*:last-child",".markdown-body a:not([href])",".markdown-body .absent",".markdown-body .anchor",".markdown-body .anchor:focus",".markdown-body p",".markdown-body blockquote",".markdown-body ul",".markdown-body ol",".markdown-body dl",".markdown-body table",".markdown-body pre",".markdown-body hr",".markdown-body blockquote",".markdown-body blockquote>:first-child",".markdown-body blockquote>:last-child",".markdown-body kbd",".markdown-body h1",".markdown-body h2",".markdown-body h3",".markdown-body h4",".markdown-body h5",".markdown-body h6",".markdown-body h1 .octicon-link",".markdown-body h2 .octicon-link",".markdown-body h3 .octicon-link",".markdown-body h4 .octicon-link",".markdown-body h5 .octicon-link",".markdown-body h6 .octicon-link",".markdown-body h1:hover .anchor",".markdown-body h2:hover .anchor",".markdown-body h3:hover .anchor",".markdown-body h4:hover .anchor",".markdown-body h5:hover .anchor",".markdown-body h6:hover .anchor",".markdown-body h1:hover .anchor .octicon-link",".markdown-body h2:hover .anchor .octicon-link",".markdown-body h3:hover .anchor .octicon-link",".markdown-body h4:hover .anchor .octicon-link",".markdown-body h5:hover .anchor .octicon-link",".markdown-body h6:hover .anchor .octicon-link",".markdown-body h1 tt",".markdown-body h1 code",".markdown-body h2 tt",".markdown-body h2 code",".markdown-body h3 tt",".markdown-body h3 code",".markdown-body h4 tt",".markdown-body h4 code",".markdown-body h5 tt",".markdown-body h5 code",".markdown-body h6 tt",".markdown-body h6 code",".markdown-body h1",".markdown-body h2",".markdown-body h3",".markdown-body h4",".markdown-body h5",".markdown-body h6",".markdown-body ul",".markdown-body ol",".markdown-body ul.no-list",".markdown-body ol.no-list",".markdown-body ul ul",".markdown-body ul ol",".markdown-body ol ol",".markdown-body ol ul",".markdown-body li",".markdown-body li>p",".markdown-body li+li",".markdown-body dl",".markdown-body dl dt",".markdown-body dl dd",".markdown-body table",".markdown-body table th",".markdown-body table th",".markdown-body table td",".markdown-body table tr",".markdown-body table tr:nth-child(2n)",".markdown-body table img",".markdown-body img",".markdown-body img[align=right]",".markdown-body img[align=left]",".markdown-body .emoji",".markdown-body span.frame",".markdown-body span.frame>span",".markdown-body span.frame span img",".markdown-body span.frame span span",".markdown-body span.align-center",".markdown-body span.align-center>span",".markdown-body span.align-center span img",".markdown-body span.align-right",".markdown-body span.align-right>span",".markdown-body span.align-right span img",".markdown-body span.float-left",".markdown-body span.float-left span",".markdown-body span.float-right",".markdown-body span.float-right>span",".markdown-body code",".markdown-body tt",".markdown-body code br",".markdown-body tt br",".markdown-body del code",".markdown-body pre",".markdown-body pre>code",".markdown-body .highlight",".markdown-body .highlight pre",".markdown-body .highlight pre",".markdown-body pre",".markdown-body pre code",".markdown-body pre tt",".markdown-body .csv-data td",".markdown-body .csv-data th",".markdown-body .csv-data .blob-num",".markdown-body .csv-data tr",".markdown-body .csv-data th"],"specificity":{"max":41,"average":17.466666666666665}},"declarations":{"total":190,"unique":112,"properties":{"font-family":["-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\""],"font-size":["16px","11px","inherit","2em","1.5em","1.25em","1em","0.875em","0.85em","1em","85%","100%","85%","12px"],"line-height":["1.5","1","10px","1.25","1.45","inherit","1"],"word-wrap":["break-word","break-all","normal","normal"],"display":["table","table","inline-block","block","block","block","block","block","block","block","block","block","block","block","block","none","inline"],"content":["\"\"","\"\""],"clear":["both","both","both","both"],"margin-top":["0","0","0","24px","0","16px",".25em","16px"],"margin-bottom":["0","16px","0","16px","0","16px","16px","0"],"color":["inherit","#cb2431","#6a737d","#444d56","#1b1f23","#6a737d","#24292e"],"text-decoration":["none","none","inherit"],"float":["left","left","left","left","right"],"padding-right":["4px","20px"],"margin-left":["-20px","13px"],"outline":["none"],"height":[".25em"],"padding":["0","0 1em","3px 5px","0","0","0","0 16px","6px 13px","7px","5px 0 0","0.2em 0.4em","0","16px","0","5px","10px 8px 9px"],"margin":["24px 0","13px 0 0","13px auto 0","0 auto","13px 0 0","0","13px 0 0","13px auto 0","0","0","0"],"background-color":["#e1e4e8","#fafbfc","#fff","#f6f8fa","transparent","#fff","transparent","rgba(27,31,35,0.05)","#f6f8fa","transparent"],"border":["0","solid 1px #c6cbd1","1px solid #dfe2e5","1px solid #dfe2e5","0","0","0"],"border-left":["0.25em solid #dfe2e5"],"vertical-align":["middle","middle","text-top"],"border-bottom-color":["#959da5"],"border-radius":["3px","3px","3px"],"box-shadow":["inset 0 -1px 0 #959da5"],"font-weight":["600","600","600","600"],"visibility":["hidden","visible"],"padding-bottom":["0.3em","0.3em"],"border-bottom":["1px solid #eaecef","1px solid #eaecef"],"padding-left":["2em","20px"],"list-style-type":["none"],"font-style":["italic"],"width":["100%","auto"],"overflow":["auto","hidden","hidden","hidden","hidden","hidden","hidden","hidden","hidden","hidden","auto","visible","hidden"],"border-top":["1px solid #c6cbd1","0","0"],"max-width":["100%","none","auto"],"box-sizing":["content-box"],"text-align":["center","center","right","right","right","left","right"],"margin-right":["13px"],"word-break":["normal","normal"],"white-space":["pre","nowrap"],"background":["transparent","#fff","#f6f8fa"]}},"mediaQueries":{"total":0,"unique":0,"values":[],"contents":[]}}}
|
|
@@ -3,19 +3,11 @@
|
|
|
3
3
|
// Inline code snippets
|
|
4
4
|
code,
|
|
5
5
|
tt {
|
|
6
|
-
padding: 0;
|
|
7
|
-
padding-top: 0.2em;
|
|
8
|
-
padding-bottom: 0.2em;
|
|
6
|
+
padding: 0.2em 0.4em;
|
|
9
7
|
margin: 0;
|
|
10
8
|
font-size: 85%;
|
|
11
9
|
background-color: rgba($black, 0.05);
|
|
12
|
-
border-radius:
|
|
13
|
-
|
|
14
|
-
&::before,
|
|
15
|
-
&::after {
|
|
16
|
-
letter-spacing: -0.2em; // this creates padding
|
|
17
|
-
content: "\00a0";
|
|
18
|
-
}
|
|
10
|
+
border-radius: $border-radius;
|
|
19
11
|
|
|
20
12
|
br { display: none; }
|
|
21
13
|
}
|
|
@@ -53,7 +45,7 @@
|
|
|
53
45
|
font-size: 85%;
|
|
54
46
|
line-height: 1.45;
|
|
55
47
|
background-color: $gray-100;
|
|
56
|
-
border-radius:
|
|
48
|
+
border-radius: $border-radius;
|
|
57
49
|
}
|
|
58
50
|
|
|
59
51
|
pre code,
|
|
@@ -67,10 +59,5 @@
|
|
|
67
59
|
word-wrap: normal;
|
|
68
60
|
background-color: transparent;
|
|
69
61
|
border: 0;
|
|
70
|
-
|
|
71
|
-
&::before,
|
|
72
|
-
&::after {
|
|
73
|
-
content: normal;
|
|
74
|
-
}
|
|
75
62
|
}
|
|
76
63
|
}
|
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
{
|
|
2
|
-
"_from": "primer-markdown@3.5
|
|
3
|
-
"_id": "primer-markdown@3.5
|
|
2
|
+
"_from": "primer-markdown@3.7.5",
|
|
3
|
+
"_id": "primer-markdown@3.7.5",
|
|
4
4
|
"_inBundle": false,
|
|
5
|
-
"_integrity": "sha1-
|
|
5
|
+
"_integrity": "sha1-u45RZGhGomtoqrTZ54WMLjbSmPg=",
|
|
6
6
|
"_location": "/primer-markdown",
|
|
7
7
|
"_phantomChildren": {},
|
|
8
8
|
"_requested": {
|
|
9
9
|
"type": "version",
|
|
10
10
|
"registry": true,
|
|
11
|
-
"raw": "primer-markdown@3.5
|
|
11
|
+
"raw": "primer-markdown@3.7.5",
|
|
12
12
|
"name": "primer-markdown",
|
|
13
13
|
"escapedName": "primer-markdown",
|
|
14
|
-
"rawSpec": "3.5
|
|
14
|
+
"rawSpec": "3.7.5",
|
|
15
15
|
"saveSpec": null,
|
|
16
|
-
"fetchSpec": "3.5
|
|
16
|
+
"fetchSpec": "3.7.5"
|
|
17
17
|
},
|
|
18
18
|
"_requiredBy": [
|
|
19
19
|
"#USER",
|
|
20
20
|
"/"
|
|
21
21
|
],
|
|
22
|
-
"_resolved": "https://registry.npmjs.org/primer-markdown/-/primer-markdown-3.5.
|
|
23
|
-
"_shasum": "
|
|
24
|
-
"_spec": "primer-markdown@3.5
|
|
25
|
-
"_where": "/Users/benbalter/projects/primer",
|
|
22
|
+
"_resolved": "https://registry.npmjs.org/primer-markdown/-/primer-markdown-3.7.5.tgz",
|
|
23
|
+
"_shasum": "bb8e51646846a26b68aab4d9e7858c2e36d298f8",
|
|
24
|
+
"_spec": "primer-markdown@3.7.5",
|
|
25
|
+
"_where": "/Users/benbalter/projects/pages-themes/primer",
|
|
26
26
|
"author": {
|
|
27
27
|
"name": "GitHub, Inc."
|
|
28
28
|
},
|
|
29
29
|
"bugs": {
|
|
30
|
-
"url": "https://github.com/primer/primer
|
|
30
|
+
"url": "https://github.com/primer/primer/issues"
|
|
31
31
|
},
|
|
32
32
|
"bundleDependencies": false,
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"primer-support": "
|
|
34
|
+
"primer-support": "4.5.2"
|
|
35
35
|
},
|
|
36
36
|
"deprecated": false,
|
|
37
37
|
"description": "GitHub stylesheets for rendering markdown.",
|
|
@@ -54,16 +54,21 @@
|
|
|
54
54
|
"license": "MIT",
|
|
55
55
|
"main": "build/index.js",
|
|
56
56
|
"name": "primer-markdown",
|
|
57
|
+
"primer": {
|
|
58
|
+
"category": "product",
|
|
59
|
+
"module_type": "components"
|
|
60
|
+
},
|
|
57
61
|
"repository": {
|
|
58
62
|
"type": "git",
|
|
59
|
-
"url": "https://github.com/primer/primer
|
|
63
|
+
"url": "https://github.com/primer/primer/tree/master/modules/primer-markdown"
|
|
60
64
|
},
|
|
65
|
+
"sass": "index.scss",
|
|
61
66
|
"scripts": {
|
|
62
|
-
"build": "primer-module-build index.scss",
|
|
63
|
-
"lint": "
|
|
67
|
+
"build": "../../script/npm-run primer-module-build index.scss",
|
|
68
|
+
"lint": "../../script/lint-scss",
|
|
64
69
|
"prepare": "npm run build",
|
|
65
|
-
"test": "npm-run-all
|
|
70
|
+
"test": "../../script/npm-run-all build lint"
|
|
66
71
|
},
|
|
67
|
-
"style": "
|
|
68
|
-
"version": "3.5
|
|
72
|
+
"style": "build/build.css",
|
|
73
|
+
"version": "3.7.5"
|
|
69
74
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
# Primer
|
|
1
|
+
# Primer Support
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.org/package/primer-support)
|
|
4
|
+
[](https://travis-ci.org/primer/primer)
|
|
5
5
|
|
|
6
6
|
> Support files are Sass variables, mixins, and functions that we import into different bases for use across components, objects, and utilities. Sharing these common properties across GitHub sites helps us to keep our styles more consistent.
|
|
7
7
|
>
|
|
8
8
|
> Most of the time to include these you'll only need to add `@import "support/support";` to the top of your bundle. If you want only a specific partial you can import them separately.
|
|
9
9
|
|
|
10
|
-
This repository is a module of the full [primer
|
|
10
|
+
This repository is a module of the full [primer][primer] repository.
|
|
11
11
|
|
|
12
12
|
## Install
|
|
13
13
|
|
|
@@ -29,14 +29,28 @@ You can also import specific portions of the module by importing those partials
|
|
|
29
29
|
|
|
30
30
|
## Documentation
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
<!-- %docs
|
|
33
|
+
title: Support
|
|
34
|
+
-->
|
|
35
|
+
|
|
36
|
+
Primer is built on systems that form the foundation of our styles, and inform the way we write and organize our CSS. Building upon systems helps us make styles consistent and interoperable with each other, and assists us with visual hierarchy and vertical rhythm.
|
|
37
|
+
|
|
38
|
+
We use Sass variables to keep color, typography, spacing, and other foundations of our system consistent. Occasionally we use Sass mixins to apply multiple CSS properties, they are a convenient solution for frequently-used verbose patterns.
|
|
39
|
+
|
|
40
|
+
We've documented variables, mixins, and the systems they are built on for the following:
|
|
41
|
+
- [Breakpoints](./support/breakpoints)
|
|
42
|
+
- [Colors](./support/color-system)
|
|
43
|
+
- [Spacing](./support/spacing)
|
|
44
|
+
- [Typography](./support/typography)
|
|
45
|
+
|
|
46
|
+
<!-- %enddocs -->
|
|
33
47
|
|
|
34
48
|
## License
|
|
35
49
|
|
|
36
50
|
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
|
37
51
|
|
|
38
52
|
[primer]: https://github.com/primer/primer
|
|
39
|
-
[docs]: http://
|
|
53
|
+
[docs]: http://primer.github.io/
|
|
40
54
|
[npm]: https://www.npmjs.com/
|
|
41
55
|
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
|
42
56
|
[sass]: http://sass-lang.com/
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Breakpoints
|
|
3
|
+
status: Stable
|
|
4
|
+
source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/mixins/layout.scss
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
{:toc}
|
|
8
|
+
|
|
9
|
+
Our breakpoints are based on screen widths where our content starts to break. Since most of GitHub is currently a fixed-width with we use pixel widths to make it easy for us to match page widths for responsive and non-responsive pages. **Our breakpoints may change as we move more of the product into responsive layouts.**
|
|
10
|
+
|
|
11
|
+
We use abbreviations for each breakpoint to keep the class names concise. This abbreviated syntax is used consistently across responsive styles. Responsive styles allow you to change the styles properties at each breakpoint. For example, when using column widths for grid layouts, you can change specify that the width is 12 columns wide at the small breakpoint, and 6 columns wide from the large breakpoint: `<div class="col-sm-12 col-lg-6">...</div>`
|
|
12
|
+
|
|
13
|
+
| Breakpoint | Syntax | Description |
|
|
14
|
+
| --- | --- | --- |
|
|
15
|
+
| Small | sm | min-width: 544px |
|
|
16
|
+
| Medium | md | min-width: 768px |
|
|
17
|
+
| Large | lg | min-width: 1012px |
|
|
18
|
+
| Extra-large | xl | min-width: 1280px |
|
|
19
|
+
|
|
20
|
+
<small>**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.</small>
|
|
21
|
+
|
|
22
|
+
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.
|
|
23
|
+
|
|
24
|
+
## Breakpoint variables
|
|
25
|
+
|
|
26
|
+
The above values are defined as variables, and then put into a Sass map that generates the media query mixin.
|
|
27
|
+
|
|
28
|
+
```scss
|
|
29
|
+
|
|
30
|
+
// breakpoints
|
|
31
|
+
$width-xs: 0;
|
|
32
|
+
$width-sm: 544px;
|
|
33
|
+
$width-md: 768px;
|
|
34
|
+
$width-lg: 1012px;
|
|
35
|
+
$width-xl: 1280px;
|
|
36
|
+
|
|
37
|
+
$breakpoints: (
|
|
38
|
+
// Small screen / phone
|
|
39
|
+
sm: $width-sm,
|
|
40
|
+
// Medium screen / tablet
|
|
41
|
+
md: $width-md,
|
|
42
|
+
// Large screen / desktop (980 + (12 * 2)) <= container + gutters
|
|
43
|
+
lg: $width-lg,
|
|
44
|
+
// Extra large screen / wide desktop
|
|
45
|
+
xl: $width-xl
|
|
46
|
+
) !default;
|
|
47
|
+
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Media query mixins
|
|
51
|
+
Use media query mixins when you want to change CSS properties at a particular breakpoint. The media query mixin works by passing in a breakpoint value, such as `breakpoint(md)`.
|
|
52
|
+
|
|
53
|
+
Media queries are scoped from each breakpoint and upwards. In the example below, the font size is `28px` until the viewport size meets the `lg` breakpoint, from there upwards—including through the `xl` breakpoint—the font size will be `32px`.
|
|
54
|
+
|
|
55
|
+
```
|
|
56
|
+
.styles {
|
|
57
|
+
font-size: 28px;
|
|
58
|
+
@include breakpoint(md) { font-size: 32px; }
|
|
59
|
+
}
|
|
60
|
+
```
|
|
@@ -0,0 +1,392 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Color system
|
|
3
|
+
status_issue: https://github.com/github/design-systems/issues/301
|
|
4
|
+
status: New release
|
|
5
|
+
source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/variables/color-system.scss
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
{:toc}
|
|
9
|
+
|
|
10
|
+
## Color palette
|
|
11
|
+
|
|
12
|
+
<div class="markdown-no-margin mb-6 d-flex h5">
|
|
13
|
+
<div class="gray-500 d-flex color-square mr-2">
|
|
14
|
+
<p class="p-3 flex-self-end text-white">Gray</p>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="blue-500 d-flex color-square mr-2">
|
|
17
|
+
<p class="p-3 flex-self-end text-white">Blue</p>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="green-500 d-flex color-square mr-2">
|
|
20
|
+
<p class="p-3 flex-self-end text-white">Green</p>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="purple-500 d-flex color-square mr-2">
|
|
23
|
+
<p class="p-3 flex-self-end text-white">Purple</p>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="yellow-500 d-flex color-square mr-2">
|
|
26
|
+
<p class="p-3 flex-self-end">Yellow</p>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="orange-500 d-flex color-square mr-2">
|
|
29
|
+
<p class="p-3 flex-self-end">Orange</p>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="red-500 d-flex color-square mr-2">
|
|
32
|
+
<p class="p-3 flex-self-end text-white">Red</p>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="bg-white d-flex color-square border border-gray-dark">
|
|
35
|
+
<p class="p-3 flex-self-end">White</p>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
## Color variables
|
|
40
|
+
|
|
41
|
+
<div class="d-flex flex-wrap gutter">
|
|
42
|
+
|
|
43
|
+
<div class="mb-6 flex-column col-6 markdown-no-margin">
|
|
44
|
+
<h3>Gray</h3>
|
|
45
|
+
<div class="gray-500 my-2 p-3">
|
|
46
|
+
<p class="text-white f00-light pb-3">Gray</p>
|
|
47
|
+
<div class="d-flex text-white">
|
|
48
|
+
<p class="h4 flex-auto">$gray-500</p>
|
|
49
|
+
<p class="text-right text-mono flex-auto">#6a737d</p>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="gray-000 h4">
|
|
53
|
+
<p class="p-3">$gray-000</p>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="gray-100 h4">
|
|
56
|
+
<p class="p-3">$gray-100</p>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="gray-200 h4">
|
|
59
|
+
<p class="p-3">$gray-200</p>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="gray-300 h4">
|
|
62
|
+
<p class="p-3">$gray-300</p>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="gray-400 h4">
|
|
65
|
+
<p class="p-3">$gray-400</p>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="gray-500 h4">
|
|
68
|
+
<p class="p-3 text-white">$gray-500</p>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="gray-600 h4">
|
|
71
|
+
<p class="p-3 text-white">$gray-600</p>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="gray-700 h4">
|
|
74
|
+
<p class="p-3 text-white">$gray-700</p>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="gray-800 h4">
|
|
77
|
+
<p class="p-3 text-white">$gray-800</p>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="gray-900 h4">
|
|
80
|
+
<p class="p-3 text-white">$gray-900</p>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<div class="mb-6 flex-column col-6 markdown-no-margin">
|
|
85
|
+
<h3>Blue</h3>
|
|
86
|
+
<div class="blue-500 my-2 p-3">
|
|
87
|
+
<p class="text-white f00-light pb-3">Blue</p>
|
|
88
|
+
<div class="d-flex text-white">
|
|
89
|
+
<p class="h4 flex-auto">$blue-500</p>
|
|
90
|
+
<p class="text-right text-mono flex-auto">#0366d6</p>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="blue-000 h4">
|
|
94
|
+
<p class="p-3">$blue-000</p>
|
|
95
|
+
</div>
|
|
96
|
+
<div class="blue-100 h4">
|
|
97
|
+
<p class="p-3">$blue-100</p>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="blue-200 h4">
|
|
100
|
+
<p class="p-3">$blue-200</p>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="blue-300 h4">
|
|
103
|
+
<p class="p-3">$blue-300</p>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="blue-400 h4">
|
|
106
|
+
<p class="p-3">$blue-400</p>
|
|
107
|
+
</div>
|
|
108
|
+
<div class="blue-500 h4">
|
|
109
|
+
<p class="p-3 text-white">$blue-500</p>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="blue-600 h4">
|
|
112
|
+
<p class="p-3 text-white">$blue-600</p>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="blue-700 h4">
|
|
115
|
+
<p class="p-3 text-white">$blue-700</p>
|
|
116
|
+
</div>
|
|
117
|
+
<div class="blue-800 h4">
|
|
118
|
+
<p class="p-3 text-white">$blue-800</p>
|
|
119
|
+
</div>
|
|
120
|
+
<div class="blue-900 h4">
|
|
121
|
+
<p class="p-3 text-white">$blue-900</p>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
<div class="mb-6 flex-column col-6 markdown-no-margin">
|
|
126
|
+
<h3>Green</h3>
|
|
127
|
+
<div class="green-500 my-2 p-3">
|
|
128
|
+
<p class="text-white f00-light pb-3">Green</p>
|
|
129
|
+
<div class="d-flex text-white">
|
|
130
|
+
<p class="h4 flex-auto">$green-500</p>
|
|
131
|
+
<p class="text-right text-mono flex-auto">#28a745</p>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
<div class="green-000 h4">
|
|
135
|
+
<p class="p-3">$green-000</p>
|
|
136
|
+
</div>
|
|
137
|
+
<div class="green-100 h4">
|
|
138
|
+
<p class="p-3">$green-100</p>
|
|
139
|
+
</div>
|
|
140
|
+
<div class="green-200 h4">
|
|
141
|
+
<p class="p-3">$green-200</p>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="green-300 h4">
|
|
144
|
+
<p class="p-3">$green-300</p>
|
|
145
|
+
</div>
|
|
146
|
+
<div class="green-400 h4">
|
|
147
|
+
<p class="p-3">$green-400</p>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="green-500 h4">
|
|
150
|
+
<p class="p-3 text-white">$green-500</p>
|
|
151
|
+
</div>
|
|
152
|
+
<div class="green-600 h4">
|
|
153
|
+
<p class="p-3 text-white">$green-600</p>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="green-700 h4">
|
|
156
|
+
<p class="p-3 text-white">$green-700</p>
|
|
157
|
+
</div>
|
|
158
|
+
<div class="green-800 h4">
|
|
159
|
+
<p class="p-3 text-white">$green-800</p>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="green-900 h4">
|
|
162
|
+
<p class="p-3 text-white">$green-900</p>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<div class="mb-6 flex-column col-6 markdown-no-margin">
|
|
167
|
+
<h3>Purple</h3>
|
|
168
|
+
<div class="purple-500 text-white my-2 p-3">
|
|
169
|
+
<p class="f00-light pb-3">Purple</p>
|
|
170
|
+
<div class="d-flex">
|
|
171
|
+
<p class="h4 flex-auto">$purple-500</p>
|
|
172
|
+
<p class="text-right text-mono flex-auto">#6f42c1</p>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
<div class="purple-000 h4">
|
|
176
|
+
<p class="p-3">$purple-000</p>
|
|
177
|
+
</div>
|
|
178
|
+
<div class="purple-100 h4">
|
|
179
|
+
<p class="p-3">$purple-100</p>
|
|
180
|
+
</div>
|
|
181
|
+
<div class="purple-200 h4">
|
|
182
|
+
<p class="p-3">$purple-200</p>
|
|
183
|
+
</div>
|
|
184
|
+
<div class="purple-300 h4">
|
|
185
|
+
<p class="p-3">$purple-300</p>
|
|
186
|
+
</div>
|
|
187
|
+
<div class="purple-400 h4">
|
|
188
|
+
<p class="p-3">$purple-400</p>
|
|
189
|
+
</div>
|
|
190
|
+
<div class="purple-500 h4">
|
|
191
|
+
<p class="p-3 text-white">$purple-500</p>
|
|
192
|
+
</div>
|
|
193
|
+
<div class="purple-600 h4">
|
|
194
|
+
<p class="p-3 text-white">$purple-600</p>
|
|
195
|
+
</div>
|
|
196
|
+
<div class="purple-700 h4">
|
|
197
|
+
<p class="p-3 text-white">$purple-700</p>
|
|
198
|
+
</div>
|
|
199
|
+
<div class="purple-800 h4">
|
|
200
|
+
<p class="p-3 text-white">$purple-800</p>
|
|
201
|
+
</div>
|
|
202
|
+
<div class="purple-900 h4">
|
|
203
|
+
<p class="p-3 text-white">$purple-900</p>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
<div class="mb-6 flex-column col-6 markdown-no-margin">
|
|
208
|
+
<h3>Yellow</h3>
|
|
209
|
+
<div class="yellow-500 my-2 p-3">
|
|
210
|
+
<p class="f00-light pb-3">Yellow</p>
|
|
211
|
+
<div class="d-flex">
|
|
212
|
+
<p class="h4 flex-auto">$yellow-500</p>
|
|
213
|
+
<p class="text-right text-mono flex-auto">#ffd93d</p>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
<div class="yellow-000 h4">
|
|
217
|
+
<p class="p-3">$yellow-000</p>
|
|
218
|
+
</div>
|
|
219
|
+
<div class="yellow-100 h4">
|
|
220
|
+
<p class="p-3">$yellow-100</p>
|
|
221
|
+
</div>
|
|
222
|
+
<div class="yellow-200 h4">
|
|
223
|
+
<p class="p-3">$yellow-200</p>
|
|
224
|
+
</div>
|
|
225
|
+
<div class="yellow-300 h4">
|
|
226
|
+
<p class="p-3">$yellow-300</p>
|
|
227
|
+
</div>
|
|
228
|
+
<div class="yellow-400 h4">
|
|
229
|
+
<p class="p-3">$yellow-400</p>
|
|
230
|
+
</div>
|
|
231
|
+
<div class="yellow-500 h4">
|
|
232
|
+
<p class="p-3">$yellow-500</p>
|
|
233
|
+
</div>
|
|
234
|
+
<div class="yellow-600 h4">
|
|
235
|
+
<p class="p-3">$yellow-600</p>
|
|
236
|
+
</div>
|
|
237
|
+
<div class="yellow-700 h4">
|
|
238
|
+
<p class="p-3">$yellow-700</p>
|
|
239
|
+
</div>
|
|
240
|
+
<div class="yellow-800 h4">
|
|
241
|
+
<p class="p-3 text-white">$yellow-800</p>
|
|
242
|
+
</div>
|
|
243
|
+
<div class="yellow-900 h4">
|
|
244
|
+
<p class="p-3 text-white">$yellow-900</p>
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
|
|
248
|
+
<div class="mb-6 flex-column col-6 markdown-no-margin">
|
|
249
|
+
<h3>Orange</h3>
|
|
250
|
+
<div class="orange-500 my-2 p-3 text-white">
|
|
251
|
+
<p class="f00-light pb-3">Orange</p>
|
|
252
|
+
<div class="d-flex">
|
|
253
|
+
<p class="h4 flex-auto">$orange-500</p>
|
|
254
|
+
<p class="text-right text-mono flex-auto">#f66a0a</p>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
<div class="orange-000 h4">
|
|
258
|
+
<p class="p-3">$orange-000</p>
|
|
259
|
+
</div>
|
|
260
|
+
<div class="orange-100 h4">
|
|
261
|
+
<p class="p-3">$orange-100</p>
|
|
262
|
+
</div>
|
|
263
|
+
<div class="orange-200 h4">
|
|
264
|
+
<p class="p-3">$orange-200</p>
|
|
265
|
+
</div>
|
|
266
|
+
<div class="orange-300 h4">
|
|
267
|
+
<p class="p-3">$orange-300</p>
|
|
268
|
+
</div>
|
|
269
|
+
<div class="orange-400 h4">
|
|
270
|
+
<p class="p-3">$orange-400</p>
|
|
271
|
+
</div>
|
|
272
|
+
<div class="orange-500 h4">
|
|
273
|
+
<p class="p-3 text-white">$orange-500</p>
|
|
274
|
+
</div>
|
|
275
|
+
<div class="orange-600 h4">
|
|
276
|
+
<p class="p-3 text-white">$orange-600</p>
|
|
277
|
+
</div>
|
|
278
|
+
<div class="orange-700 h4">
|
|
279
|
+
<p class="p-3 text-white">$orange-700</p>
|
|
280
|
+
</div>
|
|
281
|
+
<div class="orange-800 h4">
|
|
282
|
+
<p class="p-3 text-white">$orange-800</p>
|
|
283
|
+
</div>
|
|
284
|
+
<div class="orange-900 h4">
|
|
285
|
+
<p class="p-3 text-white">$orange-900</p>
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
|
|
289
|
+
<div class="mb-6 flex-column col-6 markdown-no-margin">
|
|
290
|
+
<h3>Red</h3>
|
|
291
|
+
<div class="red-500 text-white my-2 p-3">
|
|
292
|
+
<p class="f00-light pb-3">Red</p>
|
|
293
|
+
<div class="d-flex">
|
|
294
|
+
<p class="h4 flex-auto">$red-500</p>
|
|
295
|
+
<p class="text-right text-mono flex-auto">#dc3545</p>
|
|
296
|
+
</div>
|
|
297
|
+
</div>
|
|
298
|
+
<div class="red-000 h4">
|
|
299
|
+
<p class="p-3">$red-000</p>
|
|
300
|
+
</div>
|
|
301
|
+
<div class="red-100 h4">
|
|
302
|
+
<p class="p-3">$red-100</p>
|
|
303
|
+
</div>
|
|
304
|
+
<div class="red-200 h4">
|
|
305
|
+
<p class="p-3">$red-200</p>
|
|
306
|
+
</div>
|
|
307
|
+
<div class="red-300 h4">
|
|
308
|
+
<p class="p-3">$red-300</p>
|
|
309
|
+
</div>
|
|
310
|
+
<div class="red-400 h4">
|
|
311
|
+
<p class="p-3">$red-400</p>
|
|
312
|
+
</div>
|
|
313
|
+
<div class="red-500 h4">
|
|
314
|
+
<p class="p-3 text-white">$red-500</p>
|
|
315
|
+
</div>
|
|
316
|
+
<div class="red-600 h4">
|
|
317
|
+
<p class="p-3 text-white">$red-600</p>
|
|
318
|
+
</div>
|
|
319
|
+
<div class="red-700 h4">
|
|
320
|
+
<p class="p-3 text-white">$red-700</p>
|
|
321
|
+
</div>
|
|
322
|
+
<div class="red-800 h4">
|
|
323
|
+
<p class="p-3 text-white">$red-800</p>
|
|
324
|
+
</div>
|
|
325
|
+
<div class="red-900 h4">
|
|
326
|
+
<p class="p-3 text-white">$red-900</p>
|
|
327
|
+
</div>
|
|
328
|
+
</div>
|
|
329
|
+
|
|
330
|
+
<div class="mb-6 flex-column col-6">
|
|
331
|
+
</div>
|
|
332
|
+
<!-- Gray and fades (headings inside the markup) -->
|
|
333
|
+
|
|
334
|
+
<div class="mb-3 flex-column col-6 markdown-no-margin">
|
|
335
|
+
<h3>Black fades</h3>
|
|
336
|
+
<div class="black text-white my-2 p-3">
|
|
337
|
+
<p class="f00-light pb-3">Black</p>
|
|
338
|
+
<div class="d-flex pb-1">
|
|
339
|
+
<p class="h4 flex-auto">$black</p>
|
|
340
|
+
<p class="text-right text-mono flex-auto"><code>rgb(27,31,35)</code> #1b1f23</p>
|
|
341
|
+
</div>
|
|
342
|
+
<p class="f5 pt-3 border-top border-white">Black fades apply alpha transparency to the <strong>$black</strong> variable. The black color value has a slight blue hue to match our grays.</p>
|
|
343
|
+
</div>
|
|
344
|
+
<div class="black-fade-15">
|
|
345
|
+
<p class="h4 p-3">$black-fade-15</p>
|
|
346
|
+
</div>
|
|
347
|
+
<div class="black-fade-30">
|
|
348
|
+
<p class="h4 p-3">$black-fade-30</p>
|
|
349
|
+
</div>
|
|
350
|
+
<div class="black-fade-50">
|
|
351
|
+
<p class="h4 p-3">$black-fade-50</p>
|
|
352
|
+
</div>
|
|
353
|
+
<div class="black-fade-70">
|
|
354
|
+
<p class="h4 p-3 text-white">$black-fade-70</p>
|
|
355
|
+
</div>
|
|
356
|
+
<div class="black-fade-85">
|
|
357
|
+
<p class="h4 p-3 text-white">$black-fade-85</p>
|
|
358
|
+
</div>
|
|
359
|
+
</div>
|
|
360
|
+
|
|
361
|
+
<div class="mb-3 flex-column col-6 markdown-no-margin">
|
|
362
|
+
<h3>White fades</h3>
|
|
363
|
+
<div class="bg-white border text-gray-dark my-2 p-3">
|
|
364
|
+
<p class="f00-light pb-3">White</p>
|
|
365
|
+
<div class="d-flex pb-1">
|
|
366
|
+
<p class="h4 flex-auto">$white</p>
|
|
367
|
+
<p class="text-right text-mono flex-auto"><code>rgb(255, 255, 255)</code> #fff</p>
|
|
368
|
+
</div>
|
|
369
|
+
<p class="f5 pt-3 border-top border-white">White fades apply alpha transparency to the <strong>$white</strong> variable, below these are shown overlaid on a dark gray background.</p>
|
|
370
|
+
</div>
|
|
371
|
+
<div class="bg-gray-dark pr-4">
|
|
372
|
+
<div class="white-fade-15">
|
|
373
|
+
<p class="h4 p-3 text-white">$white-fade-15</p>
|
|
374
|
+
</div>
|
|
375
|
+
<div class="white-fade-30">
|
|
376
|
+
<p class="h4 p-3 text-white">$white-fade-30</p>
|
|
377
|
+
</div>
|
|
378
|
+
<div class="white-fade-50">
|
|
379
|
+
<p class="h4 p-3">$white-fade-50</p>
|
|
380
|
+
</div>
|
|
381
|
+
<div class="white-fade-70">
|
|
382
|
+
<p class="h4 p-3">$white-fade-70</p>
|
|
383
|
+
</div>
|
|
384
|
+
<div class="white-fade-85">
|
|
385
|
+
<p class="h4 p-3">$white-fade-85</p>
|
|
386
|
+
</div>
|
|
387
|
+
</div>
|
|
388
|
+
|
|
389
|
+
|
|
390
|
+
</div>
|
|
391
|
+
|
|
392
|
+
</div>
|