@primer/css 0.0.0-1f16d51 → 0.0.0-202110123633

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();
 }
 

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

@@ -162,7 +162,7 @@ h1 {
 
 mark {
   background-color: #ff0;
-  color: $text-black;
+  color: var(--color-text-primary);
 }
 
 /**

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

package/box/box.scss

@@ -2,8 +2,10 @@
 // Intended to replace simple-box, boxed-group, and table-list
 
 .Box {
-  background-color: $bg-white;
-  border: $border;
+  background-color: var(--color-canvas-default);
+  border-color: var(--color-border-default);
+  border-style: $border-style;
+  border-width: $border-width;
   border-radius: $border-radius;
 }
 
@@ -35,7 +37,6 @@
   .Box-row {
     padding: $spacer-2 $spacer-3;
   }
-
 }
 
 .Box--spacious {
@@ -67,15 +68,14 @@
   .Box-row {
     padding: $spacer-4;
   }
-
 }
 
 .Box-header {
   padding: $spacer-3;
   // stylelint-disable-next-line primer/spacing
   margin: (-$border-width) (-$border-width) 0;
-  background-color: $bg-gray;
-  border-color: $border-color;
+  background-color: var(--color-canvas-subtle);
+  border-color: var(--color-border-default);
   border-style: $border-style;
   border-width: $border-width;
   border-top-left-radius: $border-radius;
@@ -89,7 +89,7 @@
 
 .Box-body {
   padding: $spacer-3;
-  border-bottom: $border-width $border-style $border-gray;
+  border-bottom: $border-width $border-style var(--color-border-default);
 
   // Ensures bottom-border doesn't poke out when .Box-body used without box-footer
   &:last-of-type {
@@ -106,7 +106,9 @@
   // 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;
+  border-top-color: var(--color-border-muted);
+  border-top-style: $border-style;
+  border-top-width: $border-width;
 
   &:first-of-type {
     border-top-left-radius: $border-radius;
@@ -124,13 +126,13 @@
   // .unread to be deprecated with .Box-row-unread
   &.unread {
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 2px 0 0 $blue inset;
+    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);
   }
 
   &.navigation-focus {
     // Focus styles for when drag icon
     .Box-row--drag-button {
-      color: $text-blue;
+      color: var(--color-accent-fg);
       cursor: grab;
       opacity: 100;
     }
@@ -142,43 +144,42 @@
 
     // Row dragging styles
     &.sortable-chosen {
-      background-color: $bg-gray-light;
+      background-color: var(--color-canvas-subtle);
     }
 
     // Makes dragging row background gray
     &.sortable-ghost {
-      background-color: $bg-gray;
+      background-color: var(--color-canvas-subtle);
 
       // Hides contents of row while dragging so row looks solid gray
       .Box-row--drag-hide {
         opacity: 0;
       }
     }
-
   }
 }
 
 .Box-row--focus-gray {
   &.navigation-focus {
-    background-color: $bg-gray;
+    background-color: var(--color-canvas-subtle);
   }
 }
 
 .Box-row--focus-blue {
   &.navigation-focus {
-    background-color: $bg-blue-light;
+    background-color: var(--color-accent-subtle);
   }
 }
 
 .Box-row--hover-gray {
   &:hover {
-    background-color: $bg-gray;
+    background-color: var(--color-canvas-subtle);
   }
 }
 
 .Box-row--hover-blue {
   &:hover {
-    background-color: $bg-blue-light;
+    background-color: var(--color-accent-subtle);
   }
 }
 
@@ -187,15 +188,13 @@
 // and links are dark-gray with blue hover on desktop.
 .Box-row-link {
   @include breakpoint(md) {
-
-    color: $text-gray-dark;
+    color: var(--color-fg-default);
     text-decoration: none;
 
     &:hover {
-      color: $text-blue;
+      color: var(--color-accent-fg);
       text-decoration: none;
     }
-
   }
 }
 
@@ -209,7 +208,10 @@
   padding: $spacer-3;
   // stylelint-disable-next-line primer/spacing
   margin-top: -1px; // prevents double border when used with .Box-body
-  border-top: $border;
+  border-top-color: var(--color-border-default);
+  border-top-style: $border-style;
+  border-top-width: $border-width;
+  border-radius: 0 0 $border-radius $border-radius;
 }
 
 // Option for a box with scrolling content
@@ -221,67 +223,65 @@
 // Box themes
 
 .Box--blue {
-  border-color: $border-blue-light;
+  border-color: var(--color-accent-muted);
 
   .Box-header {
-    background-color: $bg-blue-light;
-    border-color: $border-blue-light;
+    background-color: var(--color-accent-subtle);
+    border-color: var(--color-accent-muted);
   }
 
   .Box-body {
-    border-color: $border-blue-light;
+    border-color: var(--color-accent-muted);
   }
 
   .Box-row {
-    border-color: $border-blue-light;
+    border-color: var(--color-accent-muted);
   }
 
   .Box-footer {
-    border-color: $border-blue-light;
+    border-color: var(--color-accent-muted);
   }
 }
 
 // Applies and red border to the outside of the box,
 // but not to the border separating rows.
 .Box--danger {
-  border-color: $border-red;
+  border-color: var(--color-danger-emphasis);
 
   .Box-row {
     &:first-of-type {
-      border-color: $border-red;
+      border-color: var(--color-danger-emphasis);
     }
   }
 
   .Box-body {
     &:last-of-type {
-      border-color: $border-red;
+      border-color: var(--color-danger-emphasis);
     }
   }
 }
 
 .Box-header--blue {
-  background-color: $bg-blue-light;
-  border-color: $border-blue-light;
+  background-color: var(--color-accent-subtle);
+  border-color: var(--color-accent-muted);
 }
 
 // Box row highlight themes
 
 .Box-row--yellow {
-  // stylelint-disable-next-line primer/colors
-  background-color: $yellow-100;
+  background-color: var(--color-attention-subtle);
 }
 
 .Box-row--blue {
-  background-color: $bg-blue-light;
+  background-color: var(--color-accent-subtle);
 }
 
 .Box-row--gray {
-  background-color: $bg-gray;
+  background-color: var(--color-canvas-subtle);
 }
 
 //Box with btn-octicon
 .Box-btn-octicon {
-
   // Increase specificity when btn-octicon is used because comes after .Box in the cascade
   &.btn-octicon {
     padding: $spacer-3 $spacer-3;

package/box/index.scss

@@ -1,2 +1,2 @@
-@import "../support/index.scss";
-@import "./box.scss";
+@import '../support/index.scss';
+@import './box.scss';

package/branch-name/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/branch-name/branch-name.scss

@@ -1,25 +1,30 @@
+// stylelint-disable selector-max-type, selector-no-qualifying-type
+
 // A nice way to display branch names inside the UI. Can be a link or not.
-// 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%);
+  color: var(--color-fg-muted);
+  background-color: var(--color-accent-subtle);
   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%);
+    color: var(--color-fg-muted);
   }
 }
 
 // When a branch name is a link
-// stylelint-disable selector-no-qualifying-type
-a.branch-name { color: $text-blue; }
-// stylelint-enable selector-no-qualifying-type
+
+a.branch-name {
+  color: var(--color-accent-fg);
+  background-color: var(--color-accent-subtle);
+
+  .octicon {
+    color: var(--color-accent-fg);
+  }
+}

package/branch-name/index.scss

@@ -1,3 +1,3 @@
 // support files
-@import "../support/index.scss";
-@import "./branch-name.scss";
+@import '../support/index.scss';
+@import './branch-name.scss';

package/breadcrumb/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/breadcrumb/breadcrumb.scss

@@ -6,11 +6,13 @@
   list-style: none;
 
   &::after {
-    padding-right: $em-spacer-5;
-    padding-left: $em-spacer-5;
-    // stylelint-disable-next-line primer/colors
-    color: $border-gray;
-    content: "/";
+    display: inline-block;
+    height: 0.8em;
+    margin: 0 $em-spacer-5;
+    content: '';
+    // stylelint-disable-next-line primer/borders
+    border-right: 0.1em $border-style var(--color-fg-muted);
+    transform: rotate(15deg);
   }
 
   &:first-child {
@@ -20,9 +22,12 @@
 
 .breadcrumb-item-selected,
 .breadcrumb-item[aria-current]:not([aria-current=false]) {
-  color: $text-gray;
-
   &::after {
     content: none;
   }
 }
+
+// stylelint-disable selector-max-type
+.breadcrumb-item-selected a {
+  color: var(--color-fg-default);
+}

package/breadcrumb/index.scss

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

package/buttons/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