primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-11 16:36:07 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #968 from primer/stylelint-update

Browse Source 
Stylelint update
This commit is contained in:
Shawn Allen 2019-11-04 14:47:38 -08:00 committed by GitHub
commit c539fcd9bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
62 changed files with 717 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
package-lock.json generated
View File

@ -14699,14 +14699,81 @@
}
},
"stylelint-config-primer": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/stylelint-config-primer/-/stylelint-config-primer-8.1.0.tgz",
"integrity": "sha512-o15Bzr7FaX2+v+Lrby9s98jFjFYh8njo5rf2r5Z9q8+dSLdBtDrx9jeoQt31zmEgahta85aC6J31O0uKwVylsg==",
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/stylelint-config-primer/-/stylelint-config-primer-9.0.0.tgz",
"integrity": "sha512-jM/D1qB33wMb6Q19iWHDfowB9Sb4LwbR4wtCWz9qeZIapGJ1nclVxJ63HgDherzXl1Im2pXa69RdOX51trrR0Q==",
"dev": true,
"requires": {
"anymatch": "^3.1.1",
"globby": "^9.2.0",
"postcss-value-parser": "^4.0.2",
"string.prototype.matchall": "^3.0.1",
"stylelint-no-unsupported-browser-features": "^1.0.0",
"stylelint-order": "^2.0.0",
"stylelint-scss": "^3.10.0"
"stylelint-scss": "^3.10.0",
"tap-map": "^1.0.0"
},
"dependencies": {
"anymatch": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
"integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
"dev": true,
"requires": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
}
},
"globby": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/globby/-/globby-9.2.0.tgz",
"integrity": "sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==",
"dev": true,
"requires": {
"@types/glob": "^7.1.1",
"array-union": "^1.0.2",
"dir-glob": "^2.2.2",
"fast-glob": "^2.2.6",
"glob": "^7.1.3",
"ignore": "^4.0.3",
"pify": "^4.0.1",
"slash": "^2.0.0"
}
},
"ignore": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
"integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
"dev": true
},
"slash": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
"integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
"dev": true
}
}
},
"stylelint-disable": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/stylelint-disable/-/stylelint-disable-0.1.5.tgz",
"integrity": "sha512-EJqGoTCG0HU9sE8zC51g8LJ+E4HYLEGBXJv4/ThOvq0KbGEA2gByyL5KFD7gat0KLB+lpAUvFKbRNvXxo3KTqg==",
"dev": true,
"requires": {
"anymatch": "^3.1.1",
"minimist": "^1.2.0"
},
"dependencies": {
"anymatch": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
"integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
"dev": true,
"requires": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
}
}
}
},
"stylelint-no-unsupported-browser-features": {
@ -14740,6 +14807,29 @@
}
}
},
"stylelint-only": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/stylelint-only/-/stylelint-only-1.0.1.tgz",
"integrity": "sha512-QaO/egPJIOo+NL6RVrXGdswLirJfbGCzUHTrX30rNVo4QzUYTTLK0aIGyJMPqOZnTlirwxRYYXzin4Nw87Q5sg==",
"dev": true,
"requires": {
"anymatch": "^3.1.1",
"minimist": "^1.2.0",
"tempfile": "^3.0.0"
},
"dependencies": {
"anymatch": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
"integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
"dev": true,
"requires": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
}
}
}
},
"stylelint-order": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-2.2.1.tgz",
@ -14752,9 +14842,9 @@
}
},
"stylelint-scss": {
"version": "3.11.0",
"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.11.0.tgz",
"integrity": "sha512-2rA9hV8+ebvzGyRBQt/KCLDS1o11SEVRzOBlhAbqk4u1PVnWcjUhRhKIGGGWcyM4QE9t+YWivbnq6kjdeHg2Nw==",
"version": "3.12.0",
"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.12.0.tgz",
"integrity": "sha512-RvZqmCnILJ0etFBjSGTXQKOspYjF+jjtFdUGoqjuis2YILy/3LCtgSdBP2I+LUOfRT+eJFCrb8g+j3ZND4FaNA==",
"dev": true,
"requires": {
"lodash": "^4.17.15",
@ -14762,14 +14852,6 @@
"postcss-resolve-nested-selector": "^0.1.1",
"postcss-selector-parser": "^6.0.2",
"postcss-value-parser": "^4.0.2"
},
"dependencies": {
"postcss-value-parser": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
"integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
"dev": true
}
}
},
"stylis": {
@ -14925,6 +15007,12 @@
}
}
},
"tap-map": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/tap-map/-/tap-map-1.0.0.tgz",
"integrity": "sha512-qYUKYf/zPDpj9xL8eb3mBcGN+8qHcW4Yvem02SapcBZAw9PQHHrozIu+bma3o5MdDbcmgKK88hv5rCTGR8RZfA==",
"dev": true
},
"tapable": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.1.tgz",
@ -14946,6 +15034,22 @@
"memoizerific": "^1.11.3"
}
},
"temp-dir": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
"integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
"dev": true
},
"tempfile": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/tempfile/-/tempfile-3.0.0.tgz",
"integrity": "sha512-uNFCg478XovRi85iD42egu+eSFUmmka750Jy7L5tfHI5hQKKtbPnxaSaXAbBqCDYrw3wx4tXjKwci4/QmsZJxw==",
"dev": true,
"requires": {
"temp-dir": "^2.0.0",
"uuid": "^3.3.2"
}
},
"term-size": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",

5
package.json
View File

@ -73,7 +73,10 @@
"style-loader": "^0.18.2",
"styled-components": "4.1.2",
"stylelint": "^10.1.0",
"stylelint-config-primer": "^8.1.0",
"stylelint-config-primer": "^9.0.0",
"stylelint-disable": "^0.1.5",
"stylelint-only": "^1.0.1",
"stylelint-scss": "^3.12.0",
"table": "5.2.3",
"typographic-base": "^1.0.4",
"unified": "^7.1.0",

26
src/alerts/flash.scss
View File

@ -3,10 +3,12 @@
.flash {
position: relative;
padding: $spacer-3;
// stylelint-disable-next-line primer/colors
color: $blue-800;
// stylelint-disable-next-line primer/colors
background-color: $blue-100;
border: 1px solid $border-black-fade;
border-radius: 3px;
border: $border-width $border-style $border-black-fade;
border-radius: $border-radius;
p:last-child {
margin-bottom: 0;
@ -40,6 +42,7 @@
// Action button
.flash-action {
float: right;
// stylelint-disable-next-line primer/spacing
margin-top: -3px;
margin-left: $spacer-4;
}
@ -49,26 +52,31 @@
//
.flash-warn {
// stylelint-disable-next-line primer/colors
color: $yellow-900;
// stylelint-disable-next-line primer/colors
background-color: $yellow-100;
border-color: $black-fade-15;
border-color: $border-black-fade;
}
.flash-error {
// stylelint-disable-next-line primer/colors
color: $red-900;
background-color: $red-100;
border-color: $black-fade-15;
background-color: $bg-red-light;
border-color: $border-black-fade;
}
.flash-success {
// stylelint-disable-next-line primer/colors
color: $green-800;
background-color: $green-100;
border-color: $black-fade-15;
background-color: $bg-green-light;
border-color: $border-black-fade;
}
.flash-full {
// stylelint-disable-next-line primer/spacing
margin-top: -1px;
border-width: 1px 0;
border-width: $border-width 0;
border-radius: 0;
}
@ -87,7 +95,9 @@
// FIXME deprecate this
.warning {
padding: $em-spacer-5;
// stylelint-disable-next-line primer/spacing
margin-bottom: 0.8em;
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/colors
background-color: $yellow-100;
}

2
src/avatars/avatar-parent-child.scss
View File

@ -11,6 +11,8 @@
right: -15%;
bottom: -9%;
background-color: $bg-white; // For transparent backgrounds
// stylelint-disable-next-line primer/borders
border-radius: 2px;
// stylelint-disable-next-line primer/box-shadow
box-shadow: -2px -2px 0 rgba($white, 0.8);
}

18
src/avatars/avatar-stack.scss
View File

@ -30,9 +30,11 @@
width: 20px;
height: 20px;
box-sizing: content-box;
// stylelint-disable-next-line primer/spacing
margin-right: -11px;
background-color: $bg-white;
border-right: $border-width $border-style $white;
border-right: $border-width $border-style $border-white;
// stylelint-disable-next-line primer/borders
border-radius: 2px;
transition: margin 0.1s ease-in-out;
@ -47,6 +49,7 @@
// stylelint-disable selector-max-type
img {
// stylelint-disable-next-line primer/borders
border-radius: 2px;
}
// stylelint-enable selector-max-type
@ -60,6 +63,7 @@
&:hover {
.avatar {
// stylelint-disable-next-line primer/spacing
margin-right: 3px;
}
@ -77,7 +81,7 @@
.avatar.avatar-more {
z-index: 1;
margin-right: 0;
background: $gray-100;
background: $bg-gray;
&::before,
&::after {
@ -85,17 +89,20 @@
display: block;
height: 20px;
content: "";
// stylelint-disable-next-line primer/borders
border-radius: 2px;
outline: $border-width $border-style $white;
}
&::before {
width: 17px;
// stylelint-disable-next-line primer/colors
background: $gray-200;
}
&::after {
width: 14px;
// stylelint-disable-next-line primer/colors
background: $gray-300;
}
}
@ -109,11 +116,13 @@
&:hover .avatar {
margin-right: 0;
// stylelint-disable-next-line primer/spacing
margin-left: 3px;
}
}
.avatar.avatar-more {
// stylelint-disable-next-line primer/colors
background: $gray-300;
&::before {
@ -122,14 +131,15 @@
&::after {
width: 2px;
background: $gray-100;
background: $bg-gray;
}
}
.avatar {
margin-right: 0;
// stylelint-disable-next-line primer/spacing
margin-left: -11px;
border-right: 0;
border-left: $border-width $border-style $white;
border-left: $border-width $border-style $border-white;
}
}

4
src/avatars/avatar.scss
View File

@ -3,9 +3,10 @@
overflow: hidden; // Ensure page layout in Firefox should images fail to load
line-height: $lh-condensed-ultra;
vertical-align: middle;
border-radius: 3px;
border-radius: $border-radius;
}
// stylelint-disable-next-line primer/borders
.avatar-small { border-radius: 2px; }
.avatar-link {
@ -16,5 +17,6 @@
// User for example on /stars and /user for grids of avatars
.avatar-group-item {
display: inline-block;
// stylelint-disable-next-line primer/spacing
margin-bottom: 3px;
}

3
src/avatars/circle-badge.scss
View File

@ -4,7 +4,7 @@
display: flex;
align-items: center;
justify-content: center;
background-color: $white;
background-color: $bg-white;
border-radius: 50%;
box-shadow: $box-shadow-medium;
}
@ -45,6 +45,7 @@
left: 0;
width: 100%;
content: "";
// stylelint-disable-next-line primer/borders
border-bottom: 2px dashed $border-gray;
}

4
src/base/base.scss
View File

@ -40,11 +40,13 @@ strong {
hr,
.rule {
height: 0;
// stylelint-disable-next-line primer/spacing
margin: 15px 0;
overflow: hidden;
background: transparent;
border: 0;
border-bottom: 1px solid lighten($gray-300, 5%);
// stylelint-disable-next-line primer/borders
border-bottom: $border-width $border-style lighten($gray-300, 5%);
@include clearfix();
}

5
src/base/kbd.scss
View File

@ -3,14 +3,19 @@
kbd {
display: inline-block;
// stylelint-disable-next-line primer/spacing
padding: ($spacer-1 - 1) ($spacer-1 + 1);
font: 11px $mono-font;
// stylelint-disable-next-line primer/typography
line-height: 10px;
// stylelint-disable-next-line primer/colors
color: $gray-700;
vertical-align: middle;
background-color: $bg-gray-light;
// stylelint-disable-next-line primer/borders
border: $border-style $border-width $border-gray-dark;
border-bottom-color: $border-gray-dark;
border-radius: $border-radius;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 -1px 0 $border-gray-dark;
}

10
src/base/normalize.scss vendored
View File

@ -162,7 +162,7 @@ h1 {
mark {
background-color: #ff0;
color: #000;
color: $text-black;
}
/**
@ -234,7 +234,7 @@ samp {
*/
figure {
margin: 1em 40px;
margin: 1em $spacer-6;
}
/**
@ -269,7 +269,7 @@ textarea {
*/
optgroup {
font-weight: bold;
font-weight: $font-weight-bold;
}
/**
@ -333,9 +333,9 @@ button:-moz-focusring,
*/
fieldset {
border: 1px solid #c0c0c0;
border: $border-width $border-style #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
padding: 0.35em 0.625em $em-spacer-6;
}
/**

2
src/base/typography-base.scss
View File

@ -23,10 +23,12 @@ h6 { @include h6; }
p {
margin-top: 0;
// stylelint-disable-next-line primer/spacing
margin-bottom: 10px;
}
small {
// stylelint-disable-next-line primer/typography
font-size: 90%;
}

9
src/blankslate/blankslate.scss
View File

@ -5,11 +5,12 @@
text-align: center;
code {
// stylelint-disable-next-line primer/spacing
padding: 2px 5px 3px;
font-size: $h5-size;
background: $bg-white;
border: 1px solid $border-gray-light;
border-radius: 3px;
border: $border-width $border-style $border-gray-light;
border-radius: $border-radius;
}
img {
@ -22,14 +23,16 @@
margin-right: $spacer-1;
margin-bottom: $spacer-2;
margin-left: $spacer-1;
// stylelint-disable-next-line primer/colors
color: lighten($gray-400, 5%);
}
.blankslate-capped {
border-radius: 0 0 3px 3px;
border-radius: 0 0 $border-radius $border-radius;
}
.blankslate-spacious {
// stylelint-disable-next-line primer/spacing
padding: ($spacer-6 * 2) $spacer-6;
}

17
src/box/box.scss
View File

@ -2,7 +2,7 @@
// Intended to replace simple-box, boxed-group, and table-list
.Box {
background-color: $white;
background-color: $bg-white;
border: $border-width $border-style $border-gray-dark;
border-radius: $border-radius;
}
@ -26,6 +26,7 @@
.Box-btn-octicon {
&.btn-octicon {
padding: $spacer-2 $spacer-3;
// stylelint-disable-next-line primer/spacing
margin: (-$spacer-2) (-$spacer-3);
line-height: $lh-condensed;
}
@ -58,6 +59,7 @@
.Box-btn-octicon {
&.btn-octicon {
padding: $spacer-4;
// stylelint-disable-next-line primer/spacing
margin: (-$spacer-4) (-$spacer-4);
}
}
@ -70,6 +72,7 @@
.Box-header {
padding: $spacer-3;
// stylelint-disable-next-line primer/spacing
margin: (-$border-width) (-$border-width) 0;
background-color: $bg-gray;
border-color: $border-gray-dark;
@ -90,8 +93,11 @@
// Ensures bottom-border doesn't poke out when .Box-body used without box-footer
&:last-of-type {
// stylelint-disable-next-line primer/spacing
margin-bottom: -$border-width;
// stylelint-disable-next-line primer/borders
border-bottom-right-radius: 2px;
// stylelint-disable-next-line primer/borders
border-bottom-left-radius: 2px;
}
}
@ -99,18 +105,23 @@
// Box rows
.Box-row {
padding: $spacer-3;
// stylelint-disable-next-line primer/spacing
margin-top: -1px;
list-style-type: none; // To account for applying Box component to a list
border-top: $border-width $border-style $border-gray;
&:first-of-type {
border-top-color: transparent;
// stylelint-disable-next-line primer/borders
border-top-left-radius: 2px;
// stylelint-disable-next-line primer/borders
border-top-right-radius: 2px;
}
&:last-of-type {
// stylelint-disable-next-line primer/borders
border-bottom-right-radius: 2px;
// stylelint-disable-next-line primer/borders
border-bottom-left-radius: 2px;
}
@ -119,6 +130,7 @@
&.Box-row--unread,
// .unread to be deprecated with .Box-row-unread
&.unread {
// stylelint-disable-next-line primer/box-shadow
box-shadow: 2px 0 0 $blue inset;
}
@ -202,6 +214,7 @@
.Box-footer {
padding: $spacer-3;
// stylelint-disable-next-line primer/spacing
margin-top: -1px; // prevents double border when used with .Box-body
border-top: $border-width $border-style $border-gray;
}
@ -261,6 +274,7 @@
// Box row highlight themes
.Box-row--yellow {
// stylelint-disable-next-line primer/colors
background-color: $yellow-100;
}
@ -278,6 +292,7 @@
// Increase specificity when btn-octicon is used because comes after .Box in the cascade
&.btn-octicon {
padding: $spacer-3 $spacer-3;
// stylelint-disable-next-line primer/spacing
margin: (-$spacer-3) (-$spacer-3);
line-height: $lh-default; // override btn-octicon line-height
}

7
src/branch-name/branch-name.scss
View File

@ -2,14 +2,19 @@
// stylelint-disable selector-max-type
.branch-name {
display: inline-block;
// stylelint-disable-next-line primer/spacing
padding: 2px 6px;
font: 12px $mono-font;
// stylelint-disable-next-line primer/colors
color: rgba($black, 0.6);
// stylelint-disable-next-line primer/colors
background-color: lighten($blue-100, 3%);
border-radius: 3px;
border-radius: $border-radius;
.octicon {
// stylelint-disable-next-line primer/spacing
margin: 1px -2px 0 0;
// stylelint-disable-next-line primer/colors
color: desaturate($blue-300, 70%);
}
}

2
src/breadcrumb/breadcrumb.scss
View File

@ -1,5 +1,6 @@
.breadcrumb-item {
display: inline-block;
// stylelint-disable-next-line primer/spacing
margin-left: -0.35em;
white-space: nowrap;
list-style: none;
@ -7,6 +8,7 @@
&::after {
padding-right: $em-spacer-5;
padding-left: $em-spacer-5;
// stylelint-disable-next-line primer/colors
color: $border-gray;
content: "/";
}

16
src/buttons/button.scss
View File

@ -4,9 +4,11 @@
.btn {
position: relative;
display: inline-block;
// stylelint-disable-next-line primer/spacing
padding: 6px 12px;
font-size: $body-font-size;
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography
line-height: 20px; // Specifically not inherit our `<body>` default
white-space: nowrap;
vertical-align: middle;
@ -15,7 +17,8 @@
background-repeat: repeat-x;
background-position: -1px -1px;
background-size: 110% 110%;
border: 1px solid transparentize($black, 0.8);
border: $border-width $border-style $border-color-button;
// stylelint-disable-next-line primer/borders
border-radius: 0.25em;
appearance: none; // Corrects inability to style clickable `input` types in iOS.
@ -31,8 +34,9 @@
// Darken for just a tad more contrast against the button background
.Counter {
color: $gray-600;
color: $text-gray;
text-shadow: none;
// stylelint-disable-next-line primer/colors
background-color: rgba($black, 0.1);
}
@ -82,8 +86,10 @@
//
// Tweak `line-height` to make them smaller.
.btn-sm {
// stylelint-disable-next-line primer/spacing
padding: 3px 10px;
font-size: $font-size-small;
// stylelint-disable-next-line primer/typography
line-height: 20px;
}
@ -91,6 +97,7 @@
.btn-large {
padding: $em-spacer-6 1.25em;
font-size: inherit;
// stylelint-disable-next-line primer/borders
border-radius: 6px;
}
@ -126,6 +133,7 @@
&:disabled {
&,
&:hover {
// stylelint-disable-next-line primer/colors
color: rgba($gray-600, 0.5);
cursor: default;
}
@ -159,7 +167,9 @@
// Icon-only buttons
.btn-octicon {
display: inline-block;
// stylelint-disable-next-line primer/spacing
padding: 5px;
// stylelint-disable-next-line primer/spacing
margin-left: 5px;
line-height: $lh-condensed-ultra;
color: $text-gray;
@ -172,9 +182,11 @@
&:hover { color: $text-blue; }
&.disabled {
// stylelint-disable-next-line primer/colors
color: $gray-400;
cursor: default;
// stylelint-disable-next-line primer/colors
&:hover { color: $gray-400; }
}
}

16
src/buttons/misc.scss
View File

@ -20,6 +20,7 @@
position: relative;
top: -1px;
display: inline-block;
// stylelint-disable-next-line primer/spacing
margin-left: 5px;
line-height: 0;
}
@ -29,24 +30,31 @@
.ellipsis-expander {
display: inline-block;
height: 12px;
// stylelint-disable-next-line primer/spacing
padding: 0 5px 5px;
font-size: $font-size-small;
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography
line-height: 6px;
// stylelint-disable-next-line primer/colors
color: $gray-700;
text-decoration: none;
vertical-align: middle;
// stylelint-disable-next-line primer/colors
background: lighten($gray-300, 5%);
border: 0;
// stylelint-disable-next-line primer/borders
border-radius: 1px;
&:hover {
text-decoration: none;
// stylelint-disable-next-line primer/colors
background-color: darken($gray-300, 4%);
}
&:active {
color: $text-white;
// stylelint-disable-next-line primer/colors
background-color: $blue-400;
}
}
@ -56,17 +64,19 @@
// A container that is used for social bubbles counts.
.social-count {
float: left;
// stylelint-disable-next-line primer/spacing
padding: 3px 10px;
font-size: $font-size-small;
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography
line-height: 20px;
color: $text-gray-dark;
vertical-align: middle;
background-color: $bg-white;
border: 1px solid transparentize($black, 0.8); // match with .btn
border: $border-width $border-style $border-color-button;
border-left: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
&:hover,
&:active {

62
src/dropdown/dropdown.scss
View File

@ -8,7 +8,8 @@
height: 0;
vertical-align: middle;
content: "";
border-style: solid;
border-style: $border-style;
// stylelint-disable-next-line primer/borders
border-width: $spacer-1 $spacer-1 0;
border-right-color: transparent;
border-bottom-color: transparent;
@ -25,11 +26,13 @@
width: 160px;
padding-top: $spacer-1;
padding-bottom: $spacer-1;
// stylelint-disable-next-line primer/spacing
margin-top: 2px;
list-style: none;
background-color: $bg-white;
background-clip: padding-box;
border: $border-width $border-style $black-fade-15;
border: $border-width $border-style $border-black-fade;
// stylelint-disable-next-line primer/borders
border-radius: $spacer-1;
box-shadow: $box-shadow-large;
@ -41,13 +44,15 @@
}
&::before {
border: $spacer-2 solid transparent;
border-bottom-color: $black-fade-15;
// stylelint-disable-next-line primer/borders
border: $spacer-2 $border-style transparent;
border-bottom-color: $border-black-fade;
}
&::after {
border: 7px solid transparent;
border-bottom-color: $white;
// stylelint-disable-next-line primer/borders
border: 7px $border-style transparent;
border-bottom-color: $border-white;
}
// stylelint-disable-next-line selector-max-type
@ -136,7 +141,7 @@
right: -$spacer-3;
left: auto;
border-color: transparent;
border-left-color: $black-fade-15;
border-left-color: $border-black-fade;
}
&::after {
@ -144,7 +149,7 @@
right: -14px;
left: auto;
border-color: transparent;
border-left-color: $white;
border-left-color: $border-white;
}
}
@ -159,14 +164,14 @@
top: $spacer-2;
left: -$spacer-3;
border-color: transparent;
border-right-color: $black-fade-15;
border-right-color: $border-black-fade;
}
&::after {
top: 11px;
left: -14px;
border-color: transparent;
border-right-color: $white;
border-right-color: $border-white;
}
}
@ -174,6 +179,7 @@
top: auto;
bottom: 100%;
left: 0;
// stylelint-disable-next-line primer/spacing
margin-bottom: 3px;
&::before,
@ -185,19 +191,25 @@
&::before {
bottom: -$spacer-2;
left: 9px;
border-top: $spacer-2 solid $black-fade-15;
border-right: $spacer-2 solid transparent;
// stylelint-disable-next-line primer/borders
border-top: $spacer-2 $border-style $border-black-fade;
// stylelint-disable-next-line primer/borders
border-right: $spacer-2 $border-style transparent;
border-bottom: 0;
border-left: $spacer-2 solid transparent;
// stylelint-disable-next-line primer/borders
border-left: $spacer-2 $border-style transparent;
}
&::after {
bottom: -7px;
left: 10px;
border-top: 7px solid $white;
border-right: 7px solid transparent;
// stylelint-disable-next-line primer/borders
border-top: 7px $border-style $border-white;
// stylelint-disable-next-line primer/borders
border-right: 7px $border-style transparent;
border-bottom: 0;
border-left: 7px solid transparent;
// stylelint-disable-next-line primer/borders
border-left: 7px $border-style transparent;
}
}
@ -250,20 +262,23 @@
// Dark dropdowns
.dropdown-menu-dark {
color: $white;
color: $text-white;
// stylelint-disable-next-line primer/colors
background: $gray-800;
border-color: $gray-700;
border-color: $border-gray-darker;
box-shadow: $box-shadow-large;
&::before {
border-bottom-color: $gray-700;
border-bottom-color: $border-gray-darker;
}
&::after {
// stylelint-disable-next-line primer/borders
border-bottom-color: $gray-800;
}
.dropdown-header {
// stylelint-disable-next-line primer/colors
color: $gray-300;
}
@ -279,30 +294,33 @@
&.dropdown-menu-w {
&::before {
border-color: transparent transparent transparent $gray-700;
border-color: transparent transparent transparent $border-gray-darker;
}
&::after {
// stylelint-disable-next-line primer/borders
border-color: transparent transparent transparent $gray-800;
}
}
&.dropdown-menu-e {
&::before {
border-color: transparent $gray-700 transparent transparent;
border-color: transparent $border-gray-darker transparent transparent;
}
&::after {
// stylelint-disable-next-line primer/borders
border-color: transparent $gray-800 transparent transparent;
}
}
&.dropdown-menu-ne {
&::before {
border-color: $gray-700 transparent transparent transparent;
border-color: $border-gray-darker transparent transparent transparent;
}
&::after {
// stylelint-disable-next-line primer/borders
border-color: $gray-800 transparent transparent transparent;
}
}

37
src/forms/form-control.scss
View File

@ -18,21 +18,24 @@ label {
.form-control,
.form-select {
min-height: 34px;
// stylelint-disable-next-line primer/spacing
padding: 6px $spacer-2;
font-size: $h4-size;
// stylelint-disable-next-line primer/typography
line-height: 20px;
color: $text-gray-dark;
vertical-align: middle;
background-color: $bg-white;
background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
border: 1px solid $border-gray-dark;
border-radius: 3px;
border: $border-width $border-style $border-gray-dark;
border-radius: $border-radius;
outline: none;
box-shadow: $form-control-shadow;
&.focus,
&:focus {
// stylelint-disable-next-line primer/borders
border-color: $blue-400;
outline: none;
box-shadow: $form-control-shadow, $btn-input-focus-shadow;
@ -54,6 +57,7 @@ label {
// Inputs to be used against dark backgrounds.
.input-dark {
color: $text-white;
// stylelint-disable-next-line primer/colors
background-color: $white-fade-15;
border-color: transparent;
@ -64,7 +68,9 @@ label {
&.focus,
&:focus {
// stylelint-disable-next-line primer/borders
border-color: $black-fade-30;
// stylelint-disable-next-line primer/box-shadow
box-shadow: 0 0 0 0.2em rgba($blue-300, 0.4);
}
}
@ -77,9 +83,12 @@ label {
// Mini inputs, to match .minibutton
.input-sm {
min-height: 28px;
// stylelint-disable-next-line primer/spacing
padding-top: 3px;
// stylelint-disable-next-line primer/spacing
padding-bottom: 3px;
font-size: $font-size-small;
// stylelint-disable-next-line primer/typography
line-height: 20px;
}
@ -115,7 +124,9 @@ label {
//
// For checkboxes and radio button selections.
.form-checkbox {
// stylelint-disable-next-line primer/spacing
padding-left: 20px;
// stylelint-disable-next-line primer/spacing
margin: 15px 0;
vertical-align: middle;
@ -123,16 +134,19 @@ label {
em.highlight {
position: relative;
left: -$spacer-1;
// stylelint-disable-next-line primer/spacing
padding: 2px $spacer-1;
font-style: normal;
// stylelint-disable-next-line primer/colors
background: $yellow-100;
border-radius: 3px;
border-radius: $border-radius;
}
}
input[type=checkbox],
input[type=radio] {
float: left;
// stylelint-disable-next-line primer/spacing
margin: 5px 0 0 -20px;
vertical-align: middle;
}
@ -142,7 +156,7 @@ label {
margin: 0;
font-size: $font-size-small;
font-weight: $font-weight-normal;
color: $gray-600;
color: $text-gray;
}
}
@ -165,18 +179,21 @@ label {
// Wrap field groups in `<div.hfields>` to lay them out horizontally - great for
// the top of pages with autosave.
.hfields {
// stylelint-disable-next-line primer/spacing
margin: 15px 0;
@include clearfix;
.form-group {
float: left;
// stylelint-disable-next-line primer/spacing
margin: 0 30px 0 0;
dt {
label {
display: inline-block;
// stylelint-disable-next-line primer/spacing
margin: 5px 0 0;
color: $gray-600;
color: $text-gray;
}
img {
@ -188,9 +205,11 @@ label {
.btn {
float: left;
// stylelint-disable-next-line primer/spacing
margin: 28px 25px 0 -20px;
}
// stylelint-disable-next-line primer/spacing
.form-select { margin-top: 5px; }
}
@ -212,6 +231,7 @@ input::-webkit-inner-spin-button {
float: right;
+ .btn {
// stylelint-disable-next-line primer/spacing
margin-right: 5px;
}
}
@ -219,12 +239,15 @@ input::-webkit-inner-spin-button {
.form-warning {
padding: $spacer-2 10px;
// stylelint-disable-next-line primer/spacing
margin: 10px 0;
font-size: $h5-size;
// stylelint-disable-next-line primer/colors
color: $yellow-900;
// stylelint-disable-next-line primer/colors
background: $yellow-100;
border: 1px solid $border-yellow;
border-radius: 3px;
border: $border-width $border-style $border-yellow;
border-radius: $border-radius;
p {
margin: 0;

26
src/forms/form-group.scss
View File

@ -5,12 +5,14 @@
// stylelint-disable selector-max-compound-selectors
// stylelint-disable selector-max-type
.form-group {
// stylelint-disable-next-line primer/spacing
margin: 15px 0;
// Text fields
.form-control {
width: 440px;
max-width: 100%;
// stylelint-disable-next-line primer/spacing
margin-right: 5px;
background-color: $bg-gray-light;
@ -41,6 +43,7 @@
// The Label
dt {
// stylelint-disable-next-line primer/spacing
margin: 0 0 6px;
}
@ -51,10 +54,12 @@
&.flattened dt {
float: left;
margin: 0;
// stylelint-disable-next-line primer/typography
line-height: 32px;
}
&.flattened dd {
// stylelint-disable-next-line primer/typography
line-height: 32px;
}
@ -83,6 +88,7 @@
&.required {
dt label::after {
// stylelint-disable-next-line primer/spacing
padding-left: 5px;
color: $text-red;
content: "*";
@ -133,13 +139,15 @@
z-index: 10;
display: block; // Show up in errored/warn state
max-width: 450px; // Keep our long errors readable
// stylelint-disable-next-line primer/spacing
padding: 5px $spacer-2;
margin: $spacer-1 0 0;
// stylelint-disable-next-line primer/typography
font-size: 13px;
font-weight: $font-weight-normal;
border-style: solid;
border-width: 1px;
border-radius: 3px;
border-style: $border-style;
border-width: $border-width;
border-radius: $border-radius;
&::after,
&::before {
@ -151,15 +159,19 @@
height: 0;
pointer-events: none;
content: " ";
border: solid transparent;
// stylelint-disable-next-line primer/borders
border: $border-style transparent;
}
&::after {
// stylelint-disable-next-line primer/borders
border-width: 5px;
}
&::before {
// stylelint-disable-next-line primer/spacing
margin-left: -1px;
// stylelint-disable-next-line primer/borders
border-width: 6px;
}
}
@ -167,11 +179,14 @@
&.warn {
.warning {
// stylelint-disable-next-line primer/colors
color: $yellow-900;
// stylelint-disable-next-line primer/colors
background-color: $yellow-100;
border-color: $border-yellow;
&::after {
// stylelint-disable-next-line primer/borders
border-bottom-color: $yellow-100;
}
@ -187,11 +202,13 @@
}
.error {
// stylelint-disable-next-line primer/colors
color: $red-900;
background-color: $bg-red-light;
border-color: $border-red-light;
&::after {
// stylelint-disable-next-line primer/borders
border-bottom-color: $bg-red-light;
}
@ -209,6 +226,7 @@
color: $text-gray;
.spinner {
// stylelint-disable-next-line primer/spacing
margin-right: 3px;
vertical-align: middle;
}

7
src/forms/form-select.scss
View File

@ -6,7 +6,10 @@
max-width: 100%;
height: 34px;
padding-right: $spacer-4;
background: $bg-white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC") no-repeat right 8px center;
background-color: $bg-white;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 8px 10px;
appearance: none;
@ -23,7 +26,9 @@
.select-sm {
height: 28px;
min-height: 28px;
// stylelint-disable-next-line primer/spacing
padding-top: 3px;
// stylelint-disable-next-line primer/spacing
padding-bottom: 3px;
font-size: $font-size-small;

42
src/forms/form-validation.scss
View File

@ -5,6 +5,7 @@ dl.form-group > dd {
&.is-autocheck-loading,
&.is-autocheck-successful,
&.is-autocheck-errored {
// stylelint-disable-next-line primer/spacing
padding-right: 30px; // Leave some space for our validation icons
}
@ -53,6 +54,7 @@ dl.form-group > dd {
display: inline-block;
width: 16px;
height: 16px;
// stylelint-disable-next-line primer/spacing
margin-left: 5px;
.octicon {
@ -68,6 +70,7 @@ dl.form-group > dd {
.octicon-check {
display: inline-block;
// stylelint-disable-next-line primer/colors
color: $green;
fill: $green;
}
@ -96,7 +99,9 @@ dl.form-group > dd {
.status-indicator-loading {
width: 16px;
background: url("/images/spinners/octocat-spinner-32-EAF2F5.gif") 0 0 no-repeat;
background-image: url("/images/spinners/octocat-spinner-32-EAF2F5.gif");
background-repeat: no-repeat;
background-position: 0 0;
background-size: 16px;
}
@ -114,16 +119,20 @@ dl.form-group > dd {
// Previously part of `_forms.scss` in Primer. Needs accounting for.
.drag-and-drop {
// stylelint-disable-next-line primer/spacing
padding: 7px 10px;
margin: 0;
// stylelint-disable-next-line primer/typography
font-size: 13px;
// stylelint-disable-next-line primer/typography
line-height: 16px;
color: $text-gray;
background-color: $gray-000;
border: 1px solid darken($gray-300, 5%);
background-color: $bg-gray-light;
// stylelint-disable-next-line primer/borders
border: $border-width $border-style darken($gray-300, 5%);
border-top: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: $border-radius;
border-bottom-left-radius: $border-radius;
.default,
.loading,
@ -193,7 +202,9 @@ dl.form-group > dd {
.manual-file-chooser {
position: absolute;
width: 240px;
// stylelint-disable-next-line primer/spacing
padding: 5px;
// stylelint-disable-next-line primer/spacing
margin-left: -80px;
cursor: pointer;
opacity: 0.0001;
@ -208,6 +219,7 @@ dl.form-group > dd {
.manual-file-chooser {
top: 0;
padding: 0;
// stylelint-disable-next-line primer/typography
line-height: 34px;
}
}
@ -216,13 +228,14 @@ dl.form-group > dd {
.upload-enabled {
textarea {
display: block;
border-bottom: 1px dashed lighten($gray-300, 5%);
// stylelint-disable-next-line primer/borders
border-bottom: $border-width dashed lighten($gray-300, 5%);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
&.focused {
border-radius: 3px;
border-radius: $border-radius;
box-shadow: $form-control-shadow, $btn-input-focus-shadow;
.form-control {
@ -230,6 +243,7 @@ dl.form-group > dd {
}
.drag-and-drop {
// stylelint-disable-next-line primer/borders
border-color: lighten($blue-400, 8%);
}
}
@ -238,6 +252,7 @@ dl.form-group > dd {
// Dropping a file on top
.dragover textarea,
.dragover .drag-and-drop {
// stylelint-disable-next-line primer/box-shadow
box-shadow: rgba(#c9ff00, 1) 0 0 3px;
}
@ -255,7 +270,8 @@ dl.form-group > dd {
}
.comment {
border: 1px solid darken($gray-300, 5%);
// stylelint-disable-next-line primer/borders
border: $border-width $border-style darken($gray-300, 5%);
}
.comment-form-error { margin-bottom: $spacer-2; }
@ -284,6 +300,7 @@ dl.form-group > dd {
// Used in our boxed-group-less form styles. Give the sumbit button enough space
// to breathe without the need for the extra hr.
.form-action-spacious {
// stylelint-disable-next-line primer/spacing
margin-top: 10px;
}
@ -302,6 +319,7 @@ div.composer {
min-height: 200px;
}
// stylelint-disable-next-line primer/spacing
.composer .tabnav { margin: 0 0 10px; }
// Misc CSS
@ -309,23 +327,27 @@ div.composer {
// Previously part of `_forms.scss` in Primer. Needs accounting for.
h2.account {
// stylelint-disable-next-line primer/spacing
margin: 15px 0 0;
// stylelint-disable-next-line primer/typography
font-size: 18px;
font-weight: $font-weight-normal;
color: $gray-600;
color: $text-gray;
}
p.explain {
position: relative;
font-size: $font-size-small;
color: $gray-600;
color: $text-gray;
strong {
color: $text-gray-dark;
}
.octicon {
// stylelint-disable-next-line primer/spacing
margin-right: 5px;
// stylelint-disable-next-line primer/colors
color: $gray-400;
}

2
src/forms/input-group.scss
View File

@ -37,6 +37,7 @@
}
.input-group-button:first-child .btn {
// stylelint-disable-next-line primer/spacing
margin-right: -1px;
}
@ -47,5 +48,6 @@
}
.input-group-button:last-child .btn {
// stylelint-disable-next-line primer/spacing
margin-left: -1px;
}

4
src/header/header.scss
View File

@ -4,6 +4,7 @@
padding: $spacer-3;
font-size: $h5-size;
line-height: $lh-default;
// stylelint-disable-next-line primer/colors
color: $white-fade-70;
background-color: $bg-gray-dark;
align-items: center;
@ -24,11 +25,12 @@
.Header-link {
font-weight: $font-weight-bold;
color: $white;
color: $text-white;
white-space: nowrap;
&:hover,
&:focus {
// stylelint-disable-next-line primer/colors
color: $white-fade-70;
text-decoration: none;
}

9
src/labels/counters.scss
View File

@ -1,12 +1,15 @@
// Counters are rounded-corner badges for numbers
.Counter {
display: inline-block;
// stylelint-disable-next-line primer/spacing
padding: 2px 5px;
font-size: $font-size-small;
font-weight: $font-weight-bold;
line-height: $lh-condensed-ultra;
color: $gray-600;
color: $text-gray;
// stylelint-disable-next-line primer/colors
background-color: rgba($black, 0.08);
// stylelint-disable-next-line primer/borders
border-radius: 20px;
&:empty {
@ -16,10 +19,12 @@
.Counter--gray-light {
color: $text-gray-dark;
// stylelint-disable-next-line primer/colors
background-color: $black-fade-15;
}
.Counter--gray {
color: $white;
color: $text-white;
// stylelint-disable-next-line primer/colors
background-color: $gray;
}

1
src/labels/diffstat.scss
View File

@ -16,6 +16,7 @@
display: inline-block;
width: $spacer-2;
height: $spacer-2;
// stylelint-disable-next-line primer/spacing
margin-left: 1px;
}

5
src/labels/issue-labels.scss
View File

@ -2,11 +2,15 @@
.IssueLabel {
height: 20px;
// stylelint-disable-next-line primer/spacing
padding: 0.15em $spacer-1;
font-size: $h6-size;
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography
line-height: 15px;
// stylelint-disable-next-line primer/borders
border-radius: 2px;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 -1px 0 rgba($black, 0.12);
.g-emoji {
@ -31,6 +35,7 @@
.g-emoji {
display: inline-block;
// stylelint-disable-next-line primer/spacing
margin-top: -1px;
}

13
src/labels/labels.scss
View File

@ -15,12 +15,15 @@
.label,
.Label {
display: inline-block;
// stylelint-disable-next-line primer/spacing
padding: 3px $spacer-1;
font-size: $font-size-small;
font-weight: $font-weight-bold;
line-height: $lh-condensed-ultra; // prevent inheritance from changing proportions
color: $text-white;
// stylelint-disable-next-line primer/borders
border-radius: 2px;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 -1px 0 rgba($black, 0.12);
&:hover {
@ -33,26 +36,30 @@
// Commonly used across the site to indicate a particular role. For example,
// "repo owner" within code comments or role in organizations.
.Label--gray {
color: $gray-600;
color: $text-gray;
// stylelint-disable-next-line primer/colors
background-color: lighten($gray-200, 3%);
}
.Label--outline {
// stylelint-disable-next-line primer/spacing
margin-top: -1px; // offsets the 1px border
// stylelint-disable-next-line primer/spacing
margin-bottom: -1px; // offsets the 1px border
font-weight: $font-weight-normal;
color: $text-gray;
background-color: transparent;
border: 1px solid $black-fade-15;
border: $border-width $border-style $border-black-fade;
box-shadow: none;
}
.Label--outline-green {
color: $text-green;
border: 1px solid $border-green;
border: $border-width $border-style $border-green;
}
.Label--gray-darker {
// stylelint-disable-next-line primer/colors
background-color: $gray;
}

6
src/labels/states.scss
View File

@ -12,18 +12,22 @@
display: inline-block;
padding: $spacer-1 $spacer-2;
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography
line-height: 20px;
color: $text-white;
text-align: center;
white-space: nowrap;
// stylelint-disable-next-line primer/colors
background-color: $gray-500;
border-radius: 3px;
border-radius: $border-radius;
}
// stylelint-disable-next-line primer/colors
.State--green { background-color: darken($green-400, 5%); }
.State--purple { background-color: $bg-purple; }
// stylelint-disable-next-line primer/colors
.State--red { background-color: $red-600; }
.State--small {

4
src/markdown/blob-csv.scss
View File

@ -2,6 +2,7 @@
.markdown-body .csv-data {
td,
th {
// stylelint-disable-next-line primer/spacing
padding: 5px;
overflow: hidden;
font-size: $font-size-small;
@ -11,6 +12,7 @@
}
.blob-num {
// stylelint-disable-next-line primer/spacing
padding: 10px $spacer-2 9px;
text-align: right;
background: $bg-white;
@ -21,7 +23,7 @@
th {
font-weight: $font-weight-bold;
background: $gray-100;
background: $bg-gray;
border-top: 0;
}
}

8
src/markdown/code.scss
View File

@ -3,9 +3,12 @@
// Inline code snippets
code,
tt {
// stylelint-disable-next-line primer/spacing
padding: 0.2em 0.4em;
margin: 0;
// stylelint-disable-next-line primer/typography
font-size: 85%;
// stylelint-disable-next-line primer/colors
background-color: rgba($black, 0.05);
border-radius: $border-radius;
@ -21,6 +24,7 @@
> code {
padding: 0;
margin: 0;
// stylelint-disable-next-line primer/typography
font-size: 100%;
word-break: normal;
white-space: pre;
@ -42,9 +46,11 @@
pre {
padding: $spacer-3;
overflow: auto;
// stylelint-disable-next-line primer/typography
font-size: 85%;
// stylelint-disable-next-line primer/typography
line-height: 1.45;
background-color: $gray-100;
background-color: $bg-gray;
border-radius: $border-radius;
}

15
src/markdown/headings.scss
View File

@ -15,7 +15,7 @@
line-height: $lh-condensed;
.octicon-link {
color: $black;
color: $text-black;
vertical-align: middle;
visibility: hidden;
}
@ -35,18 +35,23 @@
}
h1 {
// stylelint-disable-next-line primer/spacing
padding-bottom: 0.3em;
// stylelint-disable-next-line primer/typography
font-size: 2em;
border-bottom: 1px solid lighten($gray-200, 3%);
border-bottom: $border-width $border-style $border-gray-light;
}
h2 {
// stylelint-disable-next-line primer/spacing
padding-bottom: 0.3em;
// stylelint-disable-next-line primer/typography
font-size: 1.5em;
border-bottom: 1px solid lighten($gray-200, 3%);
border-bottom: $border-width $border-style $border-gray-light;
}
h3 {
// stylelint-disable-next-line primer/typography
font-size: 1.25em;
}
@ -55,11 +60,13 @@
}
h5 {
// stylelint-disable-next-line primer/typography
font-size: 0.875em;
}
h6 {
// stylelint-disable-next-line primer/typography
font-size: 0.85em;
color: $gray-500;
color: $text-gray-light;
}
}

14
src/markdown/images.scss
View File

@ -11,10 +11,12 @@
background-color: $bg-white;
&[align=right] {
// stylelint-disable-next-line primer/spacing
padding-left: 20px;
}
&[align=left] {
// stylelint-disable-next-line primer/spacing
padding-right: 20px;
}
}
@ -37,10 +39,13 @@
display: block;
float: left;
width: auto;
// stylelint-disable-next-line primer/spacing
padding: 7px;
// stylelint-disable-next-line primer/spacing
margin: 13px 0 0;
overflow: hidden;
border: 1px solid lighten($gray-300, 5%);
// stylelint-disable-next-line primer/borders
border: $border-width $border-style lighten($gray-300, 5%);
}
span img {
@ -50,6 +55,7 @@
span span {
display: block;
// stylelint-disable-next-line primer/spacing
padding: 5px 0 0;
clear: both;
color: $text-gray-dark;
@ -63,6 +69,7 @@
> span {
display: block;
// stylelint-disable-next-line primer/spacing
margin: 13px auto 0;
overflow: hidden;
text-align: center;
@ -81,6 +88,7 @@
> span {
display: block;
// stylelint-disable-next-line primer/spacing
margin: 13px 0 0;
overflow: hidden;
text-align: right;
@ -95,10 +103,12 @@
span.float-left {
display: block;
float: left;
// stylelint-disable-next-line primer/spacing
margin-right: 13px;
overflow: hidden;
span {
// stylelint-disable-next-line primer/spacing
margin: 13px 0 0;
}
}
@ -106,11 +116,13 @@
span.float-right {
display: block;
float: right;
// stylelint-disable-next-line primer/spacing
margin-left: 13px;
overflow: hidden;
> span {
display: block;
// stylelint-disable-next-line primer/spacing
margin: 13px auto 0;
overflow: hidden;
text-align: right;

1
src/markdown/lists.scss
View File

@ -6,6 +6,7 @@
// Lists, Blockquotes & Such
ul,
ol {
// stylelint-disable-next-line primer/spacing
padding-left: 2em;
&.no-list {

10
src/markdown/markdown-body.scss
View File

@ -45,12 +45,13 @@
// Link Colors
.absent {
color: $red-600;
color: $text-red;
}
.anchor {
float: left;
padding-right: $spacer-1;
// stylelint-disable-next-line primer/spacing
margin-left: -20px;
line-height: $lh-condensed-ultra;
@ -75,14 +76,17 @@
height: $em-spacer-3;
padding: 0;
margin: $spacer-4 0;
// stylelint-disable-next-line primer/colors
background-color: $gray-200;
border: 0;
}
blockquote {
// stylelint-disable-next-line primer/spacing
padding: 0 1em;
color: $gray-500;
border-left: 0.25em solid lighten($gray-300, 5%);
color: $text-gray-light;
// stylelint-disable-next-line primer/borders
border-left: 0.25em $border-style lighten($gray-300, 5%);
> :first-child {
margin-top: 0;

9
src/markdown/tables.scss
View File

@ -13,16 +13,19 @@
th,
td {
// stylelint-disable-next-line primer/spacing
padding: 6px 13px;
border: 1px solid lighten($gray-300, 5%);
// stylelint-disable-next-line primer/borders
border: $border-width $border-style lighten($gray-300, 5%);
}
tr {
background-color: $bg-white;
border-top: 1px solid darken($gray-300, 4%);
// stylelint-disable-next-line primer/borders
border-top: $border-width $border-style darken($gray-300, 4%);
&:nth-child(2n) {
background-color: $gray-100;
background-color: $bg-gray;
}
}

28
src/marketing/buttons/button.scss
View File

@ -3,25 +3,28 @@
padding: $spacer-3 $spacer-4;
font-size: $h5-size;
font-weight: $font-weight-semibold;
color: $white;
color: $text-white;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
// stylelint-disable-next-line primer/colors
background-color: $blue-mktg;
border: 1px solid $blue-mktg;
// stylelint-disable-next-line primer/borders
border: $border-width $border-style $blue-mktg;
border-radius: $border-radius;
transition: $transition-time / 2;
appearance: none; // Corrects inability to style clickable `input` types in iOS.
&:hover {
text-decoration: none;
background-color: $blue-500;
border-color: $blue-500;
background-color: $bg-blue;
border-color: $border-blue;
}
&:focus {
outline: 0;
// stylelint-disable-next-line primer/box-shadow
box-shadow: 0 0 0 0.2em rgba($blue-500, 0.3);
}
@ -34,33 +37,43 @@
}
.btn-primary-mktg {
// stylelint-disable-next-line primer/colors
background-color: $green-mktg;
// stylelint-disable-next-line primer/borders
border-color: $green-mktg;
&:hover {
background-color: $green-500;
background-color: $bg-green;
// stylelint-disable-next-line primer/borders
border-color: $green-500;
}
&:focus {
// stylelint-disable-next-line primer/box-shadow
box-shadow: 0 0 0 0.2em rgba($green-500, 0.3);
}
}
.btn-large-mktg {
// stylelint-disable-next-line primer/spacing
padding: 20px $spacer-5;
font-size: $h4-size;
}
.btn-outline-mktg {
// stylelint-disable-next-line primer/colors
color: $blue-mktg;
// stylelint-disable-next-line primer/colors
background-color: rgba($white, 0);
// stylelint-disable-next-line primer/borders
border-color: rgba($blue-mktg, 0.5);
&:hover {
color: $blue-500;
color: $text-blue;
text-decoration: none;
// stylelint-disable-next-line primer/colors
background-color: rgba($white, 0);
// stylelint-disable-next-line primer/borders
border-color: rgba($blue-mktg, 1);
}
}
@ -73,9 +86,10 @@
}
.btn-transparent {
color: $white;
color: $text-white;
background-color: transparent;
background-image: none;
// stylelint-disable-next-line primer/borders
border: $border-width $border-style $white-fade-50;
&:hover,

12
src/marketing/support/variables.scss
View File

@ -24,11 +24,11 @@ $h000-size: 64px !default;
$h000-size-mobile: 48px !default;
// Colors
$green-mktg: mix($green-500, $green-400, 50%);
$blue-mktg: mix($blue-400, $blue-500, 42%);
$green-mktg: mix($green-500, $green-400, 50%) !default;
$blue-mktg: mix($blue-400, $blue-500, 42%) !default;
// Animations
$transition-time: 0.4s;
$transition-time: 0.4s !default;
// Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12
// i.e. After 40px, we have 48, 64, 80, 96, etc.
@ -39,8 +39,10 @@ $spacer-10: $spacer * 12 !default; // 96px
$spacer-11: $spacer * 14 !default; // 112px
$spacer-12: $spacer * 16 !default; // 128px
$marketingSpacers: $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;
$allSpacers: $spacer-1, $spacer-2, $spacer-3, $spacer-4, $spacer-5, $spacer-6, $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;
// TODO@14.0.0: remove $marketingSpacers (unused)
$marketingSpacers: $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12 !default;
// TODO@14.0.0: remove $allSpacers (unused)
$allSpacers: $spacer-1, $spacer-2, $spacer-3, $spacer-4, $spacer-5, $spacer-6, $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12 !default;
$marketing-spacers: (
7: $spacer-7,

6
src/navigation/filter-list.scss
View File

@ -6,6 +6,7 @@
&.small .filter-item {
padding: $spacer-1 10px;
// stylelint-disable-next-line primer/spacing
margin: 0 0 2px;
font-size: $font-size-small;
}
@ -25,6 +26,7 @@
position: relative;
display: block;
padding: $spacer-2 10px;
// stylelint-disable-next-line primer/spacing
margin-bottom: 5px;
overflow: hidden;
font-size: $h5-size;
@ -33,10 +35,11 @@
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
border-radius: 3px;
border-radius: $border-radius;
&:hover {
text-decoration: none;
// stylelint-disable-next-line primer/colors
background-color: lighten($gray-200, 3%);
}
@ -57,6 +60,7 @@
bottom: 2px;
z-index: -1;
display: inline-block;
// stylelint-disable-next-line primer/colors
background-color: darken($gray-100, 2%);
}
}

31
src/navigation/menu.scss
View File

@ -3,38 +3,45 @@
// A menu on the side of a page, defaults to left side. e.g. github.com/about
.menu {
// stylelint-disable-next-line primer/spacing
margin-bottom: 15px;
list-style: none;
background-color: $bg-white;
border: 1px solid $gray-300;
border-radius: 3px;
border: $border-width $border-style $border-gray-dark;
border-radius: $border-radius;
}
.menu-item {
position: relative;
display: block;
padding: $spacer-2 10px;
border-bottom: 1px solid $gray-200;
border-bottom: $border;
&:first-child {
border-top: 0;
// stylelint-disable-next-line primer/borders
border-top-left-radius: 2px;
// stylelint-disable-next-line primer/borders
border-top-right-radius: 2px;
// stylelint-disable-next-line primer/borders
&::before { border-top-left-radius: 2px; }
}
&:last-child {
border-bottom: 0;
// stylelint-disable-next-line primer/borders
border-bottom-right-radius: 2px;
// stylelint-disable-next-line primer/borders
border-bottom-left-radius: 2px;
// stylelint-disable-next-line primer/borders
&::before { border-bottom-left-radius: 2px; }
}
&:hover {
text-decoration: none;
background-color: $gray-100;
background-color: $bg-gray;
}
&.selected {
@ -50,12 +57,14 @@
left: 0;
width: 2px;
content: "";
// stylelint-disable-next-line primer/colors
background-color: $orange-600;
}
}
.octicon {
width: 16px;
// stylelint-disable-next-line primer/spacing
margin-right: 5px;
color: $text-gray-dark;
text-align: center;
@ -63,16 +72,19 @@
.Counter {
float: right;
// stylelint-disable-next-line primer/spacing
margin-left: 5px;
}
.menu-warning {
float: right;
// stylelint-disable-next-line primer/colors
color: $red-900;
}
.avatar {
float: left;
// stylelint-disable-next-line primer/spacing
margin-right: 5px;
}
@ -88,25 +100,32 @@
padding: $spacer-2 10px;
margin-top: 0;
margin-bottom: 0;
// stylelint-disable-next-line primer/typography
font-size: 13px;
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography
line-height: 20px;
color: $gray-600;
color: $text-gray;
// stylelint-disable-next-line primer/colors
background-color: darken($gray-100, 1%);
border-bottom: 1px solid $gray-200;
border-bottom: $border;
&:hover {
text-decoration: none;
}
&:first-child {
// stylelint-disable-next-line primer/borders
border-top-left-radius: 2px;
// stylelint-disable-next-line primer/borders
border-top-right-radius: 2px;
}
&:last-child {
border-bottom: 0;
// stylelint-disable-next-line primer/borders
border-bottom-right-radius: 2px;
// stylelint-disable-next-line primer/borders
border-bottom-left-radius: 2px;
}
}

7
src/navigation/sidenav.scss
View File

@ -23,6 +23,7 @@
&:last-child {
// makes sure there is a "bottom border" in case the list is not long enough
// stylelint-disable-next-line primer/box-shadow
box-shadow: 0 $border-width 0 $border-color;
}
@ -45,11 +46,12 @@
.SideNav-item:focus {
color: $text-gray-dark;
text-decoration: none;
background-color: $gray-100;
background-color: $bg-gray;
outline: none;
// Bar on the left
&::before {
// stylelint-disable-next-line primer/colors
background-color: $gray-300;
}
}
@ -66,6 +68,7 @@
// Bar on the left
&::before {
// stylelint-disable-next-line primer/colors
background-color: $orange-600;
}
}
@ -88,7 +91,7 @@
display: block;
width: 100%;
padding: $spacer-1 0;
color: $blue-500;
color: $text-blue;
text-align: left;
background-color: transparent;
border: 0;

28
src/navigation/subnav.scss
View File

@ -1,14 +1,16 @@
// Needs refactoring
// Sub nav
.subnav {
// stylelint-disable-next-line primer/spacing
margin-bottom: 20px;
@include clearfix();
}
.subnav-bordered {
// stylelint-disable-next-line primer/spacing
padding-bottom: 20px;
border-bottom: 1px solid lighten($gray-200, 3%);
border-bottom: $border-width $border-style $border-gray-light;
}
.subnav-flush {
@ -18,20 +20,23 @@
.subnav-item {
position: relative;
float: left;
// stylelint-disable-next-line primer/spacing
padding: 6px 14px;
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography
line-height: 20px;
color: $gray-600;
border: 1px solid $gray-200;
color: $text-gray;
border: $border;
+ .subnav-item {
// stylelint-disable-next-line primer/spacing
margin-left: -1px;
}
&:hover,
&:focus {
text-decoration: none;
background-color: $gray-100;
background-color: $bg-gray;
}
&.selected,
@ -40,27 +45,30 @@
z-index: 2;
color: $text-white;
background-color: $bg-blue;
// stylelint-disable-next-line primer/borders
border-color: $blue;
}
&:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
&:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
}
.subnav-search {
position: relative;
// stylelint-disable-next-line primer/spacing
margin-left: 10px;
}
.subnav-search-input {
width: 320px;
// stylelint-disable-next-line primer/spacing
padding-left: 30px;
color: $text-gray;
}
@ -74,6 +82,7 @@
top: 9px;
left: 8px;
display: block;
// stylelint-disable-next-line primer/colors
color: darken($gray-300, 4%);
text-align: center;
pointer-events: none;
@ -81,6 +90,7 @@
.subnav-search-context {
.btn {
// stylelint-disable-next-line primer/colors
color: $gray-700;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
@ -94,6 +104,7 @@
}
+ .subnav-search {
// stylelint-disable-next-line primer/spacing
margin-left: -1px;
.subnav-search-input {
@ -116,5 +127,6 @@
}
.subnav-spacer-right {
// stylelint-disable-next-line primer/spacing
padding-right: 10px;
}

20
src/navigation/tabnav.scss
View File

@ -2,15 +2,18 @@
// stylelint-disable selector-max-type
.tabnav {
margin-top: 0;
// stylelint-disable-next-line primer/spacing
margin-bottom: 15px;
border-bottom: 1px solid $gray-300;
border-bottom: $border-width $border-style $border-gray-dark;
.Counter {
// stylelint-disable-next-line primer/spacing
margin-left: 5px;
}
}
.tabnav-tabs {
// stylelint-disable-next-line primer/spacing
margin-bottom: -1px;
}
@ -18,19 +21,20 @@
display: inline-block;
padding: $spacer-2 12px;
font-size: $h5-size;
// stylelint-disable-next-line primer/typography
line-height: 20px;
color: $gray-600;
color: $text-gray;
text-decoration: none;
background-color: transparent;
border: 1px solid transparent;
border: $border-width $border-style transparent;
border-bottom: 0;
&[aria-selected=true],
&.selected {
color: $text-gray-dark;
background-color: $bg-white;
border-color: $gray-300;
border-radius: 3px 3px 0 0;
border-color: $border-gray-dark;
border-radius: $border-radius $border-radius 0 0;
}
&:hover,
@ -47,12 +51,15 @@
.tabnav-extra {
display: inline-block;
// stylelint-disable-next-line primer/spacing
padding-top: 10px;
// stylelint-disable-next-line primer/spacing
margin-left: 10px;
font-size: $font-size-small;
color: $gray-600;
color: $text-gray;
> .octicon {
// stylelint-disable-next-line primer/spacing
margin-right: 2px;
}
}
@ -71,5 +78,6 @@ a.tabnav-extra:hover {
// the buttons to be floated or inline-block.
.tabnav-btn {
// stylelint-disable-next-line primer/spacing
margin-left: 10px;
}

9
src/navigation/underline-nav.scss
View File

@ -17,17 +17,18 @@
line-height: $lh-default;
color: $text-gray;
text-align: center;
// stylelint-disable-next-line primer/borders
border-bottom: 2px $border-style transparent;
&:hover,
&:focus {
color: $text-gray-dark;
text-decoration: none;
border-bottom-color: $gray-300;
border-bottom-color: $border-gray-dark;
transition: 0.2s ease;
.UnderlineNav-octicon {
color: $gray-500;
color: $text-gray-light;
}
}
@ -36,10 +37,11 @@
&[aria-current] {
font-weight: $font-weight-bold;
color: $text-gray-dark;
// stylelint-disable-next-line primer/borders
border-bottom-color: $orange-600;
.UnderlineNav-octicon {
color: $gray-500;
color: $text-gray-light;
}
}
}
@ -66,6 +68,7 @@
}
.UnderlineNav-octicon {
// stylelint-disable-next-line primer/colors
color: $gray-400;
}

7
src/pagination/pagination.scss
View File

@ -8,8 +8,11 @@
em {
position: relative;
float: left;
// stylelint-disable-next-line primer/spacing
padding: 7px 12px;
// stylelint-disable-next-line primer/spacing
margin-left: -1px;
// stylelint-disable-next-line primer/typography
font-size: 13px;
font-style: normal;
font-weight: $font-weight-bold;
@ -37,6 +40,7 @@
&:focus {
z-index: 2;
text-decoration: none;
// stylelint-disable-next-line primer/colors
background-color: darken($gray-100, 2%);
border-color: $border-gray;
}
@ -56,6 +60,7 @@
.disabled,
.gap:hover,
.disabled:hover {
// stylelint-disable-next-line primer/colors
color: $gray-300;
cursor: default;
background-color: $bg-gray-light;
@ -64,7 +69,9 @@
// Unified centered pagination across the site
.paginate-container {
// stylelint-disable-next-line primer/spacing
margin-top: 20px;
// stylelint-disable-next-line primer/spacing
margin-bottom: 15px;
text-align: center;

8
src/popover/popover.scss
View File

@ -20,7 +20,9 @@
&::before {
top: -$spacer-3;
// stylelint-disable-next-line primer/spacing
margin-left: -9px;
// stylelint-disable-next-line primer/borders
border: $spacer-2 $border-style transparent;
border-bottom-color: $border-black-fade;
}
@ -28,7 +30,9 @@
&::after {
top: -14px;
margin-left: -$spacer-2;
// stylelint-disable-next-line primer/borders
border: 7px $border-style transparent;
// stylelint-disable-next-line primer/borders
border-bottom-color: $bg-white;
}
}
@ -50,6 +54,7 @@
&::after {
bottom: -14px;
// stylelint-disable-next-line primer/borders
border-top-color: $bg-white;
}
}
@ -108,6 +113,7 @@
}
&::before {
// stylelint-disable-next-line primer/spacing
margin-top: -($spacer-2 + 1);
}
@ -127,6 +133,7 @@
&::after {
right: -14px;
// stylelint-disable-next-line primer/borders
border-left-color: $bg-white;
}
}
@ -142,6 +149,7 @@
&::after {
left: -14px;
// stylelint-disable-next-line primer/borders
border-right-color: $bg-white;
}
}

1
src/progress/progress.scss
View File

@ -4,6 +4,7 @@
display: flex;
height: 8px;
overflow: hidden;
// stylelint-disable-next-line primer/colors
background-color: $gray-200;
border-radius: $border-radius;
}

23
src/select-menu/select-menu.scss
View File

@ -41,7 +41,7 @@
left: 0;
pointer-events: none;
content: "";
background-color: $black-fade-50;
background-color: $bg-black-fade;
@include breakpoint(sm) {
display: none;
@ -61,8 +61,10 @@
overflow: hidden; // Enables border radius on scrollable child elements
pointer-events: auto;
flex-direction: column;
background-color: $gray-100;
background-color: $bg-gray;
// stylelint-disable-next-line primer/borders
border-radius: $border-radius * 2;
// stylelint-disable-next-line primer/box-shadow
box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
@ -187,7 +189,7 @@
& + & {
// Add a top border only if the above element also is a list item
border-top: $border-width $border-style lighten($gray-200, 3%);
border-top: $border-width $border-style $border-gray-light;
}
@include breakpoint(sm) {
@ -215,6 +217,7 @@
.SelectMenu-tabs {
display: flex;
flex-shrink: 0;
// stylelint-disable-next-line primer/spacing
margin-bottom: -$border-width; // hide border of element below
overflow-x: auto;
overflow-y: hidden;
@ -241,6 +244,7 @@
text-align: center;
background-color: transparent;
border: 0;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 -1px 0 $border-color;
@include breakpoint(sm) {
@ -256,6 +260,7 @@
z-index: 1; // Keeps box-shadow visible when hovering
color: $text-gray-dark;
background-color: $bg-white;
// stylelint-disable-next-line primer/box-shadow
box-shadow: 0 0 0 1px $border-color;
@include breakpoint(sm) {
@ -287,7 +292,7 @@
font-size: $font-size-small;
font-weight: $font-weight-bold;
color: $text-gray-light;
background-color: $gray-100;
background-color: $bg-gray;
border-top: $border;
border-bottom: $border;
@ -335,6 +340,7 @@
// Show bottom "border" for the last item when the list doesn't take up the whole height
.SelectMenu-item:last-child {
// stylelint-disable-next-line primer/box-shadow
box-shadow: 0 $border-width 0 lighten($gray-200, 3%);
}
}
@ -377,26 +383,29 @@
body:not(.intent-mouse) .SelectMenu-item:focus,
.SelectMenu-item:hover {
color: $text-white;
background-color: $blue-500;
background-color: $bg-blue;
}
.SelectMenu-item:active {
color: $text-white;
// stylelint-disable-next-line primer/colors
background-color: $blue-400;
}
body:not(.intent-mouse) .SelectMenu-tab:focus {
// stylelint-disable-next-line primer/colors
background-color: $blue-100;
}
.SelectMenu-tab:not([aria-checked="true"]):hover {
color: $text-gray-dark;
// stylelint-disable-next-line primer/colors
background-color: $gray-200;
}
.SelectMenu-tab:not([aria-checked="true"]):active {
color: $text-gray-dark;
background-color: $gray-100;
background-color: $bg-gray;
}
}
@ -408,7 +417,7 @@
// Android
.SelectMenu-item:focus,
.SelectMenu-item:active {
background-color: $gray-000;
background-color: $bg-gray-light;
}
// iOS Safari

2
src/subhead/subhead.scss
View File

@ -15,7 +15,7 @@
// <h2> sized heading with normal font weight
.Subhead-heading {
font-size: $h2-size;
font-weight: normal;
font-weight: $font-weight-normal;
flex: 1 1 auto;
}

6
src/support/mixins/buttons.scss
View File

@ -34,7 +34,7 @@
color: rgba($color, 0.4);
background-color: $bg2;
background-image: none;
border-color: transparentize($black, 0.8); // back to default .btn
border-color: $border-color-button;
box-shadow: none;
}
@ -67,7 +67,7 @@
color: rgba($color, 0.75);
background-color: mix($bg2, $white, 50%);
background-image: none;
border-color: transparentize($black, 0.8); // repeat .btn default to avoid shift on click-drag off of button
border-color: $border-color-button;
box-shadow: none;
}
@ -114,7 +114,7 @@
color: rgba($color, 0.4);
background-color: $bg2;
background-image: none;
border-color: transparentize($black, 0.8); // back to default .btn
border-color: $border-color-button;
box-shadow: none;
}
}

8
src/support/variables/color-system.scss
View File

@ -1,3 +1,7 @@
// Black based on same hue as $gray-900
$black: #1b1f23 !default;
$white: #fff !default;
//
//
// -------- Grays --------
@ -97,10 +101,6 @@ $pink-800: #99306f !default;
$pink-900: #6d224f !default;
// -------- Fades --------
// Black based on same hue as $gray-900
$black: #1b1f23 !default;
$white: #fff !default;
$black-fade-15: rgba($black, 0.15) !default;
$black-fade-30: rgba($black, 0.3) !default;
$black-fade-50: rgba($black, 0.5) !default;

40
src/support/variables/colors.scss
View File

@ -2,40 +2,44 @@
// Color variables
// State indicators.
// TODO@14.0.0: remove $status-pending (unused)
$status-pending: desaturate($yellow-700, 15%) !default;
// Repository type colors
// Should be able to deprecate these in future
// TODO@14.0.0: remove $repo-private-text, $repo-private-bg, and $repo-private-icon
$repo-private-text: $black-fade-70 !default;
$repo-private-bg: $yellow-000 !default;
$repo-private-icon: transparentize($yellow-900, 0.5) !default;
$repo-private-icon: rgba($yellow-900, 0.5) !default;
// Highlight used for things like search
$highlight-yellow: rgba(255, 247, 140, 0.5);
// TODO@14.0.0: remove $highlight-yellow (unused)
$highlight-yellow: rgba(255, 247, 140, 0.5) !default;
// Border colors
$border-white: $white !default;
$border-black-fade: $black-fade-15 !default;
$border-white-fade: $white-fade-15 !default;
$border-blue: $blue-500 !default;
$border-blue-light: $blue-200 !default;
$border-green: $green-400 !default;
$border-green-light: desaturate($green-300, 40%) !default;
$border-purple: $purple !default;
$border-red: $red !default;
$border-red-light: desaturate($red-300, 60%) !default;
$border-yellow: desaturate($yellow-300, 60%) !default;
$border-gray-dark: $gray-300 !default;
$border-gray-darker: $gray-700 !default;
$border-gray-light: lighten($gray-200, 3%) !default;
$border-gray: $gray-200 !default;
$border-blue: $blue-500 !default;
$border-blue-light: $blue-200 !default;
$border-green: $green-400 !default;
$border-green-light: desaturate($green-300, 40%) !default;
$border-purple: $purple !default;
$border-red: $red !default;
$border-red-light: desaturate($red-300, 60%) !default;
$border-yellow: desaturate($yellow-300, 60%) !default;
// Buttons have a slightly more opaque border than $border-black-fade (15% alpha)
$border-color-button: rgba($black, 0.2) !default;
// Background colors
$bg-white: $white !default;
$bg-black: $black !default;
$bg-black-fade: $black-fade-50 !default;
$bg-blue-light: $blue-000 !default;
$bg-blue: $blue-500 !default;
$bg-gray-dark: $gray-900 !default;
@ -49,7 +53,6 @@ $bg-purple-light: $purple-000 !default;
$bg-pink: $pink-500 !default;
$bg-red: $red-500 !default;
$bg-red-light: $red-100 !default;
$bg-white: $white !default;
$bg-yellow: $yellow-500 !default;
$bg-yellow-light: $yellow-200 !default;
$bg-yellow-dark: $yellow-700 !default;
@ -60,6 +63,8 @@ $bg-diffstat-deleted: $red-600 !default;
$bg-diffstat-neutral: $gray-300 !default;
// Text colors
$text-black: $black !default;
$text-white: $white !default;
$text-blue: $blue-500 !default;
$text-gray-dark: $gray-900 !default;
$text-gray-light: $gray-500 !default;
@ -70,5 +75,4 @@ $text-orange-light: $orange-600 !default;
$text-purple: $purple !default;
$text-pink: $pink-500 !default;
$text-red: $red-600 !default;
$text-white: $white !default;
$text-yellow: $yellow-800 !default;

20
src/support/variables/layout.scss
View File

@ -1,5 +1,25 @@
// Layout variables
// these are values for the display CSS property
$display-values: (
block,
flex,
inline,
inline-block,
inline-flex,
none,
table,
table-cell
) !default;
// maps edges to respective corners for border-radius
$edges: (
top: (top-left, top-right),
right: (top-right, bottom-right),
bottom: (bottom-right, bottom-left),
left: (bottom-left, top-left)
) !default;
// These are our margin and padding utility spacers. The default step size we
// use is 8px. This gives us a key of:
// 0 => 0px

31
src/support/variables/misc.scss
View File

@ -7,33 +7,36 @@ $border-style: solid !default;
$border: $border-width $border-color $border-style !default;
$border-radius: 3px !default;
// Custom explore grid border
$exploregrid-item-border-radius: 4px;
// Box shadow
$box-shadow: 0 1px 1px rgba($black, 0.1) !default;
$box-shadow-medium: 0 1px 5px $black-fade-15 !default;
$box-shadow-large: 0 1px 15px $black-fade-15 !default;
$box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default;
// Button and form variables
$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default;
$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default;
$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default;
// Tooltips
$tooltip-max-width: 250px !default;
$tooltip-background-color: $black;
$tooltip-background-color: $black !default;
$tooltip-text-color: $white !default;
$tooltip-delay: 0.4s !default;
$tooltip-duration: 0.1s !default;
// Should be moved into custom github css
$stats-switcher-py: 10px;
// Custom explore grid border
// TODO@14.0.0: move $exploregrid-item-border-radius to github/github
$exploregrid-item-border-radius: 4px !default;
// TODO@14.0.0: remove $stats-switcher-py (unused)
$stats-switcher-py: 10px !default;
// Future proof this `height` value by finding the computed line-height, then
// adding the total value of the vertical padding. This var is used to toggle
// between the stats bar and language breakdown.
$stats-viewport-height: ($body-font-size * $body-line-height) + ($stats-switcher-py * 2);
// TODO@14.0.0: remove $stats-viewport-height (unused)
$stats-viewport-height: ($body-font-size * $body-line-height) + ($stats-switcher-py * 2) !default;
$min_tab_size: 1;
$max_tab_size: 12;
// Button and form variables
$form-control-shadow: inset 0 1px 2px rgba($black, 0.075);
$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3);
$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15;
// TODO@14.0.0: move $min_tab_size, $max_tab_size to github/github
$min_tab_size: 1 !default;
$max_tab_size: 12 !default;

18
src/timeline/timeline-item.scss
View File

@ -13,11 +13,14 @@
display: block;
width: 2px;
content: "";
// stylelint-disable-next-line primer/colors
background-color: $gray-200;
}
&:target .TimelineItem-badge {
// stylelint-disable-next-line primer/borders
border-color: $blue-400;
// stylelint-disable-next-line primer/box-shadow
box-shadow: 0 0 0.2em $blue-200;
}
}
@ -30,10 +33,13 @@
height: $spacer-5;
margin-right: $spacer-2;
margin-left: -$spacer-3 + 1;
// stylelint-disable-next-line primer/colors
color: $gray-700;
align-items: center;
// stylelint-disable-next-line primer/colors
background-color: $gray-200;
border: 2px solid $white;
// stylelint-disable-next-line primer/borders
border: 2px $border-style $border-white;
border-radius: 50%;
justify-content: center;
flex-shrink: 0;
@ -43,6 +49,7 @@
min-width: 0;
max-width: 100%;
margin-top: $spacer-1;
// stylelint-disable-next-line primer/colors
color: $gray-700;
flex: auto;
}
@ -59,10 +66,12 @@
height: $spacer-4;
margin: 0;
margin-bottom: -$spacer-3;
// stylelint-disable-next-line primer/spacing
margin-left: -($spacer-6 + $spacer-3);
background-color: $white;
background-color: $bg-white;
border: 0;
border-top: 4px solid $gray-200;
// stylelint-disable-next-line primer/borders
border-top: 4px $border-style $border-color;
}
.TimelineItem--condensed {
@ -78,8 +87,9 @@
height: $spacer-3;
margin-top: $spacer-2;
margin-bottom: $spacer-2;
// stylelint-disable-next-line primer/colors
color: $gray-400;
background-color: $white;
background-color: $bg-white;
border: 0;
}
}

14
src/toasts/toasts.scss
View File

@ -3,9 +3,10 @@
.Toast {
display: flex;
margin: $spacer-2;
color: $black;
color: $text-black;
background-color: $bg-white;
border-radius: $border-radius;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 0 0 1px $border-gray-dark, $box-shadow-medium;
@include breakpoint(sm) {
@ -22,7 +23,7 @@
width: $spacer-3 * 3;
flex-shrink: 0;
color: $text-white;
background-color: $blue-500;
background-color: $bg-blue;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
@ -44,6 +45,7 @@
}
&:active {
// stylelint-disable-next-line primer/colors
color: $gray-400;
}
}
@ -51,19 +53,21 @@
// Modifier
.Toast--error .Toast-icon {
background-color: $red-500;
background-color: $bg-red;
}
.Toast--warning .Toast-icon {
color: $gray-900;
color: $text-gray-dark;
// stylelint-disable-next-line primer/colors
background-color: $yellow-600;
}
.Toast--success .Toast-icon {
background-color: $green-500;
background-color: $bg-green;
}
.Toast--loading .Toast-icon {
// stylelint-disable-next-line primer/colors
background-color: $gray-600;
}

27
src/tooltips/tooltips.scss
View File

@ -10,7 +10,7 @@
padding: $em-spacer-5 $em-spacer-6;
font: normal normal 11px/1.5 $body-font;
-webkit-font-smoothing: subpixel-antialiased;
color: $tooltip-text-color;
color: $text-white;
text-align: center;
text-decoration: none;
text-shadow: none;
@ -20,7 +20,7 @@
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: $tooltip-background-color;
background: $bg-black;
border-radius: $border-radius;
opacity: 0;
}
@ -32,9 +32,10 @@
display: none;
width: 0;
height: 0;
color: $tooltip-background-color;
color: $text-black;
pointer-events: none;
content: "";
// stylelint-disable-next-line primer/borders
border: 6px $border-style transparent;
opacity: 0;
}
@ -90,6 +91,7 @@
&::after {
top: 100%;
right: 50%;
// stylelint-disable-next-line primer/spacing
margin-top: 6px;
}
@ -97,8 +99,10 @@
top: auto;
right: 50%;
bottom: -7px;
// stylelint-disable-next-line primer/spacing
margin-right: -6px;
border-bottom-color: $tooltip-background-color;
// stylelint-disable-next-line primer/borders
border-bottom-color: $bg-black;
}
}
@ -121,6 +125,7 @@
&::after {
right: 50%;
bottom: 100%;
// stylelint-disable-next-line primer/spacing
margin-bottom: 6px;
}
@ -128,8 +133,10 @@
top: -7px;
right: 50%;
bottom: auto;
// stylelint-disable-next-line primer/spacing
margin-right: -6px;
border-top-color: $tooltip-background-color;
// stylelint-disable-next-line primer/borders
border-top-color: $bg-black;
}
}
@ -156,6 +163,7 @@
&::after {
right: 100%;
bottom: 50%;
// stylelint-disable-next-line primer/spacing
margin-right: 6px;
transform: translateY(50%);
}
@ -164,8 +172,10 @@
top: 50%;
bottom: 50%;
left: -7px;
// stylelint-disable-next-line primer/spacing
margin-top: -6px;
border-left-color: $tooltip-background-color;
// stylelint-disable-next-line primer/borders
border-left-color: $bg-black;
}
}
@ -174,6 +184,7 @@
&::after {
bottom: 50%;
left: 100%;
// stylelint-disable-next-line primer/spacing
margin-left: 6px;
transform: translateY(50%);
}
@ -182,8 +193,10 @@
top: 50%;
right: -7px;
bottom: 50%;
// stylelint-disable-next-line primer/spacing
margin-top: -6px;
border-right-color: $tooltip-background-color;
// stylelint-disable-next-line primer/borders
border-right-color: $bg-black;
}
}

14
src/utilities/borders.scss
View File

@ -13,13 +13,6 @@
border-bottom: $border !important;
}
$edges: (
top: (top-left, top-right),
right: (top-right, bottom-right),
bottom: (bottom-right, bottom-left),
left: (bottom-left, top-left)
);
/* Responsive gray borders */
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
@ -81,6 +74,7 @@ $edges: (
/* Change the border style to dashed, in conjunction with another utility */
.border-dashed {
// stylelint-disable-next-line primer/borders
border-style: dashed !important;
}
@ -111,8 +105,12 @@ $edges: (
.border-white-fade { border-color: $border-white-fade !important; }
/* Use with .border to turn the border white w/varying transparency */
.border-white-fade-15 { border-color: $white-fade-15 !important; }
.border-white-fade-15 { border-color: $border-white-fade !important; }
// stylelint-disable-next-line primer/borders
.border-white-fade-30 { border-color: $white-fade-30 !important; }
// stylelint-disable-next-line primer/borders
.border-white-fade-50 { border-color: $white-fade-50 !important; }
// stylelint-disable-next-line primer/borders
.border-white-fade-70 { border-color: $white-fade-70 !important; }
// stylelint-disable-next-line primer/borders
.border-white-fade-85 { border-color: $white-fade-85 !important; }

2
src/utilities/details.scss
View File

@ -15,7 +15,7 @@
.details-overlay-dark[open] > summary::before {
z-index: 99;
background: $black-fade-50;
background: $bg-black-fade;
}
.details-reset {

14
src/utilities/typography.scss
View File

@ -17,6 +17,7 @@
/* Set the font size to 26px */
.h1 {
// stylelint-disable-next-line primer/typography
font-size: $h1-size-mobile !important;
@include breakpoint(md) { font-size: $h1-size !important; }
@ -24,6 +25,7 @@
/* Set the font size to 22px */
.h2 {
// stylelint-disable-next-line primer/typography
font-size: $h2-size-mobile !important;
@include breakpoint(md) { font-size: $h2-size !important; }
@ -31,6 +33,7 @@
/* Set the font size to 18px */
.h3 {
// stylelint-disable-next-line primer/typography
font-size: $h3-size-mobile !important;
@include breakpoint(md) { font-size: $h3-size !important; }
@ -60,6 +63,7 @@
// Type utilities that match type sale
/* Set the font size to 26px */
.f1 {
// stylelint-disable-next-line primer/typography
font-size: $h1-size-mobile !important;
@include breakpoint(md) { font-size: $h1-size !important; }
@ -67,6 +71,7 @@
/* Set the font size to 22px */
.f2 {
// stylelint-disable-next-line primer/typography
font-size: $h2-size-mobile !important;
@include breakpoint(md) { font-size: $h2-size !important; }
@ -74,6 +79,7 @@
/* Set the font size to 18px */
.f3 {
// stylelint-disable-next-line primer/typography
font-size: $h3-size-mobile !important;
@include breakpoint(md) { font-size: $h3-size !important; }
@ -94,6 +100,7 @@
// Type utils with light weight that match type scale
/* Set the font size to 40px and weight to light */
.f00-light {
// stylelint-disable-next-line primer/typography
font-size: $h00-size-mobile !important;
font-weight: $font-weight-light !important;
@ -102,6 +109,7 @@
/* Set the font size to 32px and weight to light */
.f0-light {
// stylelint-disable-next-line primer/typography
font-size: $h0-size-mobile !important;
font-weight: $font-weight-light !important;
@ -110,6 +118,7 @@
/* Set the font size to 26px and weight to light */
.f1-light {
// stylelint-disable-next-line primer/typography
font-size: $h1-size-mobile !important;
font-weight: $font-weight-light !important;
@ -118,6 +127,7 @@
/* Set the font size to 22px and weight to light */
.f2-light {
// stylelint-disable-next-line primer/typography
font-size: $h2-size-mobile !important;
font-weight: $font-weight-light !important;
@ -127,6 +137,7 @@
// Same size and weight as .lead but without color property
/* Set the font size to 18px and weight to light */
.f3-light {
// stylelint-disable-next-line primer/typography
font-size: $h3-size-mobile !important;
font-weight: $font-weight-light !important;
@ -139,10 +150,11 @@
/* Large leading paragraphs */
.lead {
// stylelint-disable-next-line primer/spacing
margin-bottom: 30px;
font-size: $h3-size;
font-weight: $font-weight-light;
color: $gray-600;
color: $text-gray;
}
// Line-height variations

10
src/utilities/visibility-display.scss
View File

@ -1,14 +1,4 @@
// Visibility and display utilities
$display-values: (
block,
flex,
inline,
inline-block,
inline-flex,
none,
table,
table-cell
);
// Responsive display utilities
@each $breakpoint, $variant in $responsive-variants {

8
stylelint.config.js
View File

@ -2,10 +2,16 @@ const currentVersion = process.env.PRIMER_VERSION || require('./package.json').v
module.exports = {
extends: ['stylelint-config-primer'],
plugins: ['./lib/stylelint-todo'],
plugins: ['stylelint-scss', './lib/stylelint-todo'],
syntax: 'scss',
rules: {
'scss/dollar-variable-default': [true, {ignore: 'local'}],
'primer/no-override': false,
'primer/colors': true,
'primer/borders': true,
'primer/spacing': true,
'primer/typography': true,
'primer/box-shadow': true,
'primer-css/TODO': [true, {currentVersion, severity: 'error'}]
}
}