@primer/css 0.0.0-1f49d76 → 0.0.0-20211010195643

package/autocomplete/suggester.scss

@@ -11,20 +11,20 @@
   margin-top: $spacer-4;
   list-style: none;
   cursor: pointer;
-  background: $bg-white;
-  border: $border;
+  background: var(--color-canvas-overlay);
+  border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
-  box-shadow: $box-shadow-medium;
+  box-shadow: var(--color-shadow-medium);
 
   li {
     display: block;
     padding: $spacer-1 $spacer-2;
     font-weight: $font-weight-semibold;
-    border-bottom: $border-width $border-style $border-gray-light;
+    border-bottom: $border-width $border-style var(--color-border-muted);
 
     small {
       font-weight: $font-weight-normal;
-      color: $text-gray;
+      color: var(--color-fg-muted);
     }
 
     &:last-child {
@@ -38,15 +38,32 @@
       border-top-right-radius: $border-radius;
     }
 
-    &:hover,
-    &[aria-selected="true"],
+    &:hover {
+      color: var(--color-fg-on-emphasis);
+      text-decoration: none;
+      background: var(--color-accent-emphasis);
+
+      small {
+        color: var(--color-fg-on-emphasis);
+      }
+
+      .octicon {
+        color: inherit !important;
+      }
+    }
+
+    &[aria-selected='true'],
     &.navigation-focus {
-      color: $text-white;
+      color: var(--color-fg-on-emphasis);
       text-decoration: none;
-      background: $bg-blue;
+      background: var(--color-accent-emphasis);
 
       small {
-        color: $text-white;
+        color: var(--color-fg-on-emphasis);
+      }
+
+      .octicon {
+        color: inherit !important;
       }
     }
   }

package/avatars/README.md

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
 
 [scss]: https://sass-lang.com/documentation/syntax#scss

package/avatars/avatar-parent-child.scss

@@ -10,9 +10,8 @@
   position: absolute;
   right: -15%;
   bottom: -9%;
-  background-color: $bg-white; // For transparent backgrounds
+  background-color: var(--color-canvas-default); // For transparent backgrounds
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius-1;
-  // stylelint-disable-next-line primer/box-shadow
-  box-shadow: -2px -2px 0 rgba($white, 0.8);
+  box-shadow: var(--color-avatar-child-shadow);
 }

package/avatars/avatar-stack.scss

@@ -21,7 +21,7 @@
 
 .AvatarStack-body {
   display: flex;
-  background: $bg-white;
+  background: var(--color-canvas-default);
 
   .avatar {
     position: relative;
@@ -32,8 +32,8 @@
     box-sizing: content-box;
     // stylelint-disable-next-line primer/spacing
     margin-right: -11px;
-    background-color: $bg-white;
-    border-right: $border-width $border-style $border-white;
+    background-color: var(--color-canvas-default);
+    border-right: $border-width $border-style var(--color-canvas-default);
     // stylelint-disable-next-line primer/borders
     border-radius: $border-radius-1;
     transition: margin 0.1s ease-in-out;
@@ -67,6 +67,7 @@
       margin-right: 3px;
     }
 
+    // stylelint-disable-next-line selector-max-specificity
     .avatar:nth-child(n+4) {
       display: flex;
       opacity: 1;
@@ -81,29 +82,27 @@
 .avatar.avatar-more {
   z-index: 1;
   margin-right: 0;
-  background: $bg-gray;
+  background: var(--color-canvas-subtle);
 
   &::before,
   &::after {
     position: absolute;
     display: block;
     height: 20px;
-    content: "";
+    content: '';
     // stylelint-disable-next-line primer/borders
     border-radius: 2px;
-    outline: $border-width $border-style $white;
+    outline: $border-width $border-style var(--color-canvas-default);
   }
 
   &::before {
     width: 17px;
-    // stylelint-disable-next-line primer/colors
-    background: $gray-200;
+    background: var(--color-avatar-stack-fade-more);
   }
 
   &::after {
     width: 14px;
-    // stylelint-disable-next-line primer/colors
-    background: $gray-300;
+    background: var(--color-avatar-stack-fade);
   }
 }
 
@@ -122,8 +121,7 @@
   }
 
   .avatar.avatar-more {
-    // stylelint-disable-next-line primer/colors
-    background: $gray-300;
+    background: var(--color-avatar-stack-fade);
 
     &::before {
       width: 5px;
@@ -131,7 +129,7 @@
 
     &::after {
       width: 2px;
-      background: $bg-gray;
+      background: var(--color-canvas-subtle);
     }
   }
 
@@ -140,6 +138,6 @@
     // stylelint-disable-next-line primer/spacing
     margin-left: -11px;
     border-right: 0;
-    border-left: $border-width $border-style $border-white;
+    border-left: $border-width $border-style var(--color-canvas-default);
   }
 }

package/avatars/avatar.scss

@@ -3,7 +3,11 @@
   overflow: hidden; // Ensure page layout in Firefox should images fail to load
   line-height: $lh-condensed-ultra;
   vertical-align: middle;
+  background-color: var(--color-avatar-bg); // adds opaque bg to transparent avatars
   border-radius: $border-radius;
+  flex-shrink: 0;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: 0 0 0 1px var(--color-avatar-border);
 }
 
 .avatar-link {

package/avatars/circle-badge.scss

@@ -4,9 +4,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: $bg-white;
+  background-color: var(--color-canvas-default);
   border-radius: 50%;
-  box-shadow: $box-shadow-medium;
+  box-shadow: var(--color-shadow-medium);
 }
 
 .CircleBadge-icon {
@@ -44,9 +44,9 @@
     top: 50%;
     left: 0;
     width: 100%;
-    content: "";
+    content: '';
     // stylelint-disable-next-line primer/borders
-    border-bottom: 2px dashed $border-gray;
+    border-bottom: 2px dashed var(--color-border-default);
   }
 
   .CircleBadge {

package/avatars/index.scss

@@ -1,7 +1,7 @@
-@import "../support/index.scss";
+@import '../support/index.scss';
 
 // Avatars
-@import "./avatar.scss";
-@import "./avatar-parent-child.scss";
-@import "./avatar-stack.scss";
-@import "./circle-badge.scss";
+@import './avatar.scss';
+@import './avatar-parent-child.scss';
+@import './avatar-stack.scss';
+@import './circle-badge.scss';

package/base/README.md

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
 
 [scss]: https://sass-lang.com/documentation/syntax#scss

package/base/base.scss

@@ -16,12 +16,12 @@ body {
   font-family: $body-font;
   font-size: $body-font-size;
   line-height: $body-line-height;
-  color: $text-gray-dark;
-  background-color: $bg-white;
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
 }
 
 a {
-  color: $text-blue;
+  color: var(--color-accent-fg);
   text-decoration: none;
 
   &:hover {
@@ -45,8 +45,7 @@ hr,
   overflow: hidden;
   background: transparent;
   border: 0;
-  // stylelint-disable-next-line primer/borders
-  border-bottom: $border-width $border-style lighten($gray-300, 5%);
+  border-bottom: $border-width $border-style var(--color-border-muted);
   @include clearfix();
 }
 
@@ -77,10 +76,43 @@ button {
 }
 
 details {
-  summary { cursor: pointer; }
+  summary {
+    cursor: pointer;
+  }
 
   &:not([open]) {
     // Set details content hidden by default for browsers that don't do this
-    > *:not(summary) { display: none !important; }
+    > *:not(summary) {
+      display: none !important;
+    }
+  }
+}
+
+// global focus styles
+
+// fallback :focus state
+:focus,
+.focus {
+  &:is(a, button, input, textarea, select) {
+    @include focusOutline;
+  }
+}
+
+// remove fallback :focus if :focus-visible is supported
+:focus:is(a, button, input, textarea, select):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+// default :focus-visibile state
+:focus-visible:is(a, button, input, textarea, select) {
+  @include focusOutline;
+}
+
+// remove offset for form fields
+:focus,
+:focus-visible {
+  &:is(input, textarea, select) {
+    outline-offset: 0;
+    border-color: transparent;
   }
 }

package/base/index.scss

@@ -1,6 +1,7 @@
-@import "../support/index.scss";
+@import '../support/index.scss';
 
-@import "./normalize.scss";
-@import "./base.scss";
-@import "./kbd.scss";
-@import "./typography-base.scss";
+@import './normalize.scss';
+@import './base.scss';
+@import './kbd.scss';
+@import './typography-base.scss';
+@import './octicons.scss';

package/base/kbd.scss

@@ -8,14 +8,13 @@ kbd {
   font: 11px $mono-font;
   // stylelint-disable-next-line primer/typography
   line-height: 10px;
-  // stylelint-disable-next-line primer/colors
-  color: $gray-700;
+  color: var(--color-fg-default);
   vertical-align: middle;
-  background-color: $bg-gray-light;
+  background-color: var(--color-canvas-subtle);
   // stylelint-disable-next-line primer/borders
-  border: $border-style $border-width $border-gray-dark;
-  border-bottom-color: $border-gray-dark;
+  border: $border-style $border-width var(--color-neutral-muted);
+  border-bottom-color: var(--color-neutral-muted);
   border-radius: $border-radius;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 $border-gray-dark;
+  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
 }

package/base/normalize.scss

@@ -39,7 +39,8 @@ header,
 main, /* 2 */
 menu,
 nav,
-section { /* 1 */
+section {
+  /* 1 */
   display: block;
 }
 
@@ -96,16 +97,6 @@ a {
   background-color: transparent; /* 1 */
 }
 
-/**
- * Remove the outline on focused links when they are also active or hovered
- * in all browsers (opinionated).
- */
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
 /* Text-level semantics
    ========================================================================== */
 
@@ -162,7 +153,7 @@ h1 {
 
 mark {
   background-color: #ff0;
-  color: $text-black;
+  color: var(--color-text-primary);
 }
 
 /**
@@ -278,7 +269,8 @@ optgroup {
  */
 
 button,
-input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -288,7 +280,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 
@@ -305,29 +298,6 @@ html [type="button"], /* 1 */
   -webkit-appearance: button; /* 2 */
 }
 
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 /**
  * Change the border, margin, and padding in all browsers (opinionated).
  */
@@ -367,8 +337,8 @@ textarea {
  * 2. Remove the padding in IE 10-.
  */
 
-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'],
+[type='radio'] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
@@ -377,27 +347,17 @@ textarea {
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
 /**
  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
  */
 
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 

package/base/octicons.scss

@@ -0,0 +1,6 @@
+.octicon {
+  display: inline-block;
+  overflow: visible !important;
+  vertical-align: text-bottom;
+  fill: currentColor;
+}

package/blankslate/README.md

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
 
 [scss]: https://sass-lang.com/documentation/syntax#scss

package/blankslate/blankslate.scss

@@ -4,12 +4,16 @@
   padding: $spacer-5;
   text-align: center;
 
+  p {
+    color: var(--color-fg-muted);
+  }
+
   code {
     // stylelint-disable-next-line primer/spacing
     padding: 2px 5px 3px;
     font-size: $h5-size;
-    background: $bg-white;
-    border: $border-width $border-style $border-gray-light;
+    background: var(--color-canvas-default);
+    border: $border-width $border-style var(--color-border-muted);
     border-radius: $border-radius;
   }
 
@@ -23,8 +27,7 @@
   margin-right: $spacer-1;
   margin-bottom: $spacer-2;
   margin-left: $spacer-1;
-  // stylelint-disable-next-line primer/colors
-  color: lighten($gray-400, 5%);
+  color: var(--color-fg-muted);
 }
 
 .blankslate-capped {

package/blankslate/index.scss

@@ -1,3 +1,3 @@
-@import "../support/index.scss";
+@import '../support/index.scss';
 
-@import "./blankslate.scss";
+@import './blankslate.scss';

package/box/README.md

@@ -19,7 +19,7 @@ The `@primer/css` npm package includes a standalone CSS build of this module in
 
 ## License
 
-[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
 
 
 [scss]: https://sass-lang.com/documentation/syntax#scss