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

package/forms/form-validation.scss

@@ -11,15 +11,15 @@ dl.form-group > dd, // TODO: Deprecate
     }
 
     &.is-autocheck-loading {
-      background-image: url("/images/spinners/octocat-spinner-16px.gif");
+      background-image: url('/images/spinners/octocat-spinner-16px.gif');
     }
 
     &.is-autocheck-successful {
-      background-image: url("/images/modules/ajax/success.png");
+      background-image: url('/images/modules/ajax/success.png');
     }
 
     &.is-autocheck-errored {
-      background-image: url("/images/modules/ajax/error.png");
+      background-image: url('/images/modules/ajax/error.png');
     }
   }
 }
@@ -36,15 +36,15 @@ dl.form-group > dd, // TODO: Deprecate
       }
 
       &.is-autocheck-loading {
-        background-image: url("/images/spinners/octocat-spinner-32.gif");
+        background-image: url('/images/spinners/octocat-spinner-32.gif');
       }
 
       &.is-autocheck-successful {
-        background-image: url("/images/modules/ajax/success@2x.png");
+        background-image: url('/images/modules/ajax/success@2x.png');
       }
 
       &.is-autocheck-errored {
-        background-image: url("/images/modules/ajax/error@2x.png");
+        background-image: url('/images/modules/ajax/error@2x.png');
       }
     }
   }
@@ -67,14 +67,13 @@ dl.form-group > dd, // TODO: Deprecate
 .status-indicator-success {
   // Override primer
   &::before {
-    content: "";
+    content: '';
   }
 
   .octicon-check {
     display: inline-block;
-    // stylelint-disable-next-line primer/colors
-    color: $green;
-    fill: $green;
+    color: var(--color-success-fg);
+    fill: var(--color-success-fg);
   }
 
   .octicon-x {
@@ -85,7 +84,7 @@ dl.form-group > dd, // TODO: Deprecate
 .status-indicator-failed {
   // Override primer
   &::before {
-    content: "";
+    content: '';
   }
 
   .octicon-check {
@@ -94,14 +93,14 @@ dl.form-group > dd, // TODO: Deprecate
 
   .octicon-x {
     display: inline-block;
-    color: $text-red;
-    fill: $red;
+    color: var(--color-danger-fg);
+    fill: var(--color-danger-fg);
   }
 }
 
 .status-indicator-loading {
   width: 16px;
-  background-image: url("/images/spinners/octocat-spinner-32-EAF2F5.gif");
+  background-image: url('/images/spinners/octocat-spinner-32-EAF2F5.gif');
   background-repeat: no-repeat;
   background-position: 0 0;
   background-size: 16px;
@@ -128,10 +127,9 @@ dl.form-group > dd, // TODO: Deprecate
   font-size: 13px;
   // stylelint-disable-next-line primer/typography
   line-height: 16px;
-  color: $text-gray;
-  background-color: $bg-gray-light;
-  // stylelint-disable-next-line primer/borders
-  border: $border-width $border-style darken($gray-300, 5%);
+  color: var(--color-fg-muted);
+  background-color: var(--color-canvas-subtle);
+  border: $border-width $border-style var(--color-border-default);
   border-top: 0;
   border-bottom-right-radius: $border-radius;
   border-bottom-left-radius: $border-radius;
@@ -143,7 +141,7 @@ dl.form-group > dd, // TODO: Deprecate
   }
 
   .error {
-    color: $text-red;
+    color: var(--color-danger-fg);
   }
 
   // Spinner
@@ -190,10 +188,10 @@ dl.form-group > dd, // TODO: Deprecate
 
 .drag-and-drop-error-info {
   font-weight: $font-weight-normal;
-  color: $text-gray;
+  color: var(--color-fg-muted);
 
   a {
-    color: $text-blue;
+    color: var(--color-accent-fg);
   }
 }
 
@@ -231,22 +229,21 @@ dl.form-group > dd, // TODO: Deprecate
   textarea {
     display: block;
     // stylelint-disable-next-line primer/borders
-    border-bottom: $border-width dashed lighten($gray-300, 5%);
+    border-bottom: $border-width dashed var(--color-border-default);
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
 
   &.focused {
     border-radius: $border-radius;
-    box-shadow: $form-control-shadow, $btn-input-focus-shadow;
+    box-shadow: var(--color-primer-shadow-inset), var(--color-primer-shadow-focus);
 
     .form-control {
       box-shadow: none;
     }
 
     .drag-and-drop {
-      // stylelint-disable-next-line primer/borders
-      border-color: lighten($blue-400, 8%);
+      border-color: var(--color-accent-emphasis);
     }
   }
 }
@@ -272,8 +269,7 @@ dl.form-group > dd, // TODO: Deprecate
   }
 
   .comment {
-    // stylelint-disable-next-line primer/borders
-    border: $border-width $border-style darken($gray-300, 5%);
+    border: $border-width $border-style var(--color-border-default);
   }
 
   .comment-form-error { margin-bottom: $spacer-2; }
@@ -334,23 +330,22 @@ h2.account {
   // stylelint-disable-next-line primer/typography
   font-size: 18px;
   font-weight: $font-weight-normal;
-  color: $text-gray;
+  color: var(--color-fg-muted);
 }
 
 p.explain {
   position: relative;
   font-size: $font-size-small;
-  color: $text-gray;
+  color: var(--color-fg-muted);
 
   strong {
-    color: $text-gray-dark;
+    color: var(--color-fg-default);
   }
 
   .octicon {
     // stylelint-disable-next-line primer/spacing
     margin-right: 5px;
-    // stylelint-disable-next-line primer/colors
-    color: $gray-400;
+    color: var(--color-fg-muted);
   }
 
   .minibutton {

package/forms/index.scss

@@ -1,7 +1,7 @@
-@import "../support/index.scss";
-@import "./form-control.scss";
-@import "./form-select.scss";
-@import "./form-group.scss";
-@import "./form-validation.scss";
-@import "./input-group.scss";
-@import "./radio-group.scss";
+@import '../support/index.scss';
+@import './form-control.scss';
+@import './form-select.scss';
+@import './form-group.scss';
+@import './form-validation.scss';
+@import './input-group.scss';
+@import './radio-group.scss';

package/forms/input-group.scss

@@ -18,6 +18,13 @@
   &.inline {
     display: inline-table;
   }
+
+  // within input group, if button exists change focus styles to match input (no offset)
+  &:focus-within {
+    button {
+      outline-offset: 0;
+    }
+  }
 }
 
 .input-group .form-control,

package/forms/radio-group.scss

@@ -13,14 +13,14 @@
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 20px; // Specifically not inherit our `<body>` default
-  color: $text-gray-dark;
+  color: var(--color-fg-default);
   cursor: pointer;
-  border: $border-width $border-style $border-color;
+  border: $border-width $border-style var(--color-border-default);
 
   :checked + & {
     position: relative;
     z-index: 1;
-    border-color: $border-blue;
+    border-color: var(--color-accent-emphasis);
   }
 
   &:first-of-type {
@@ -33,6 +33,11 @@
     border-top-right-radius: $border-radius;
     border-bottom-right-radius: $border-radius;
   }
+
+  .octicon {
+    margin-left: $spacer-1;
+    color: var(--color-fg-subtle);
+  }
 }
 
 .radio-input {
@@ -40,4 +45,18 @@
   float: left;
   // stylelint-disable-next-line primer/spacing
   margin: 10px (-$spacer-5) 0 $spacer-3;
+
+  &:disabled {
+    position: relative; // enables z-index
+
+    + .radio-label {
+      color: var(--color-primer-fg-disabled);
+      cursor: default;
+      background-color: var(--color-neutral-subtle);
+
+      .octicon {
+        color: inherit;
+      }
+    }
+  }
 }

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

@@ -4,9 +4,8 @@
   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;
+  color: var(--color-header-text);
+  background-color: var(--color-header-bg);
   align-items: center;
   flex-wrap: nowrap;
 }
@@ -25,13 +24,24 @@
 
 .Header-link {
   font-weight: $font-weight-bold;
-  color: $text-white;
+  color: var(--color-header-logo);
   white-space: nowrap;
 
   &:hover,
   &:focus {
-    // stylelint-disable-next-line primer/colors
-    color: $white-fade-70;
+    color: var(--color-header-text);
     text-decoration: none;
   }
 }
+
+.Header-input {
+  color: var(--color-header-text);
+  background-color: var(--color-header-search-bg);
+  border: $border-width $border-style var(--color-header-search-border);
+  box-shadow: none;
+
+  &::placeholder {
+    // stylelint-disable-next-line primer/colors
+    color: rgba(255, 255, 255, 0.75);
+  }
+}

package/header/index.scss

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

package/index.scss

@@ -5,11 +5,14 @@
  * Released under MIT license.
  */
 
-// Primer master file
+// Primer main file
 //
 // Imports all Primer files in their intended order for easy mass-inclusion.
 // Should you need specific files, you can easily use separate `@import`s.
 
+// CSS color variables
+@import "./color-modes/index.scss";
+
 // Global requirements
 @import "./core/index.scss";
 @import "./product/index.scss";

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

@@ -8,16 +8,15 @@
   font-weight: $font-weight-semibold;
   // stylelint-disable-next-line primer/typography
   line-height: $size-2 - 2px; // remove borders
-  color: $text-gray-dark;
+  color: var(--color-fg-default);
   text-align: center;
-  // stylelint-disable-next-line primer/colors
-  background-color: rgba($gray-300, 0.5);
-  border: $border-width $border-style transparent; // Support Firfox custom colors
+  background-color: var(--color-neutral-muted);
+  border: $border-width $border-style transparent; // Support Firefox custom colors
   // stylelint-disable-next-line primer/borders
   border-radius: 2em;
 
   &:empty {
-    visibility: hidden;
+    display: none;
   }
 
   .octicon {
@@ -26,12 +25,12 @@
   }
 }
 
-.Counter--gray-light {
-  color: $text-gray-light;
+.Counter--primary {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-neutral-emphasis);
 }
 
-.Counter--gray {
-  color: $text-white;
-  // stylelint-disable-next-line primer/colors
-  background-color: $gray-500;
+.Counter--secondary {
+  color: var(--color-fg-muted);
+  background-color: var(--color-neutral-subtle);
 }

package/labels/diffstat.scss

@@ -5,7 +5,7 @@
 .diffstat {
   font-size: $h6-size;
   font-weight: $font-weight-bold;
-  color: $text-gray;
+  color: var(--color-fg-muted);
   white-space: nowrap;
   cursor: default;
 }
@@ -18,20 +18,20 @@
   height: $spacer-2;
   // stylelint-disable-next-line primer/spacing
   margin-left: 1px;
-  outline-offset: -1px; // Support Firfox custom colors
+  outline-offset: -1px; // Support Firefox custom colors
 }
 
 .diffstat-block-deleted {
-  background-color: $bg-diffstat-deleted;
-  outline: 1px dashed transparent; // Support Firfox custom colors
+  background-color: var(--color-danger-emphasis);
+  outline: 1px solid var(--color-border-subtle); // Support Firefox custom colors
 }
 
 .diffstat-block-added {
-  background-color: $bg-diffstat-added;
-  outline: 1px solid transparent; // Support Firfox custom colors
+  background-color: var(--color-diffstat-addition-bg);
+  outline: 1px solid var(--color-border-subtle); // Support Firefox custom colors
 }
 
 .diffstat-block-neutral {
-  background-color: $bg-diffstat-neutral;
-  outline: 1px dotted transparent; // Support Firfox custom colors
+  background-color: var(--color-neutral-muted);
+  outline: 1px solid var(--color-border-subtle); // Support Firefox custom colors
 }

package/labels/index.scss

@@ -1,8 +1,8 @@
-@import "../support/index.scss";
-@import "./mixins.scss";
+@import '../support/index.scss';
+@import './mixins.scss';
 
-@import "./issue-labels.scss";
-@import "./labels.scss";
-@import "./states.scss";
-@import "./counters.scss";
-@import "./diffstat.scss";
+@import './issue-labels.scss';
+@import './labels.scss';
+@import './states.scss';
+@import './counters.scss';
+@import './diffstat.scss';

package/labels/labels.scss

@@ -11,7 +11,7 @@
 .Label {
   @include labels-base;
   background-color: transparent !important; // TODO: Remove again
-  border-color: $border-color;
+  border-color: var(--color-border-default);
 
   &:hover {
     text-decoration: none;
@@ -32,62 +32,51 @@
 
 // Contrast
 
-.Label--outline, // TODO: Deprecate? It's now the default
-.Label--gray {
-  color: $text-gray;
-  border-color: $border-gray;
+.Label--primary {
+  color: var(--color-fg-default);
+  border-color: var(--color-neutral-emphasis);
 }
 
-.Label--gray-darker {
-  color: $text-gray-dark;
-  // stylelint-disable-next-line primer/borders
-  border-color: $gray-500;
+.Label--secondary {
+  color: var(--color-fg-muted);
+  border-color: var(--color-border-default);
 }
 
 // Colors
 
-.Label--yellow {
-  // stylelint-disable-next-line primer/colors
-  color: $yellow-900;
-  // stylelint-disable-next-line primer/borders
-  border-color: $yellow-600;
+.Label--info, // TODO: deprecate
+.Label--accent {
+  color: var(--color-accent-fg);
+  border-color: var(--color-accent-emphasis);
 }
 
-.Label--orange {
-  // stylelint-disable-next-line primer/colors
-  color: $orange-800;
-  // stylelint-disable-next-line primer/borders
-  border-color: $orange-500;
+.Label--success {
+  color: var(--color-success-fg);
+  border-color: var(--color-success-emphasis);
 }
 
-.Label--red {
-  color: $text-red;
-  // stylelint-disable-next-line primer/borders
-  border-color: $red-600;
+.Label--warning, // TODO: deprecate
+.Label--attention {
+  color: var(--color-attention-fg);
+  border-color: var(--color-attention-emphasis);
 }
 
-.Label--outline-green, // TODO: Deprecate
-.Label--green {
-  // stylelint-disable-next-line primer/colors
-  color: $green-600;
-  // stylelint-disable-next-line primer/borders
-  border-color: $green-500;
+.Label--severe {
+  color: var(--color-severe-fg);
+  border-color: var(--color-severe-emphasis);
 }
 
-.Label--blue {
-  color: $text-blue;
-  border-color: $border-blue;
+.Label--danger {
+  color: var(--color-danger-fg);
+  border-color: var(--color-danger-emphasis);
 }
 
-.Label--purple {
-  color: $text-purple;
-  // stylelint-disable-next-line primer/borders
-  border-color: $purple-400;
+.Label--done {
+  color: var(--color-done-fg);
+  border-color: var(--color-done-emphasis);
 }
 
-.Label--pink {
-  // stylelint-disable-next-line primer/colors
-  color: $pink-600;
-  // stylelint-disable-next-line primer/borders
-  border-color: $pink-400;
+.Label--sponsors {
+  color: var(--color-sponsors-fg);
+  border-color: var(--color-sponsors-emphasis);
 }

package/labels/states.scss

@@ -1,10 +1,4 @@
 // A rounded corner box containing a label "open" or "closed"
-// The default state is gray.
-//
-// open     - $green background
-// reopened - $green background
-// closed   - $red background
-// merged   - $purple background
 
 // Default 32px
 // Small 24px
@@ -18,26 +12,33 @@
   font-weight: $font-weight-semibold;
   // 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: $border-width $border-style transparent; // Support Firfox custom colors
   // stylelint-disable-next-line primer/borders
   border-radius: 2em;
 }
 
-.State--green {
-  background-color: $bg-green;
+.state, // TODO: Deprecate
+.State,
+.State--draft {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-neutral-emphasis);
+  border: $border-width $border-style transparent;
+}
+
+.State--open {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-success-emphasis);
 }
 
-.State--red {
-  background-color: $bg-red;
+.State--merged {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-done-emphasis);
 }
 
-.State--purple {
-  background-color: $bg-purple;
+.State--closed {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-danger-emphasis);
 }
 
 // Small

package/layout/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/layout/grid-offset.scss

@@ -4,16 +4,16 @@
 
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    .offset#{$variant}-1 { margin-left: (1 / 12 * 100%) !important; }
-    .offset#{$variant}-2 { margin-left: (2 / 12 * 100%) !important; }
-    .offset#{$variant}-3 { margin-left: (3 / 12 * 100%) !important; }
-    .offset#{$variant}-4 { margin-left: (4 / 12 * 100%) !important; }
-    .offset#{$variant}-5 { margin-left: (5 / 12 * 100%) !important; }
-    .offset#{$variant}-6 { margin-left: (6 / 12 * 100%) !important; }
-    .offset#{$variant}-7 { margin-left: (7 / 12 * 100%) !important; }
-    .offset#{$variant}-8 { margin-left: (8 / 12 * 100%) !important; }
-    .offset#{$variant}-9 { margin-left: (9 / 12 * 100%) !important; }
-    .offset#{$variant}-10 { margin-left: (10 / 12 * 100%) !important; }
-    .offset#{$variant}-11 { margin-left: (11 / 12 * 100%) !important; }
+    .offset#{$variant}-1 { margin-left: (1 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-2 { margin-left: (2 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-3 { margin-left: (3 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-4 { margin-left: (4 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-5 { margin-left: (5 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-6 { margin-left: (6 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-7 { margin-left: (7 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-8 { margin-left: (8 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-9 { margin-left: (9 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-10 { margin-left: (10 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-11 { margin-left: (11 * 0.0833333333 * 100%) !important; }
   }
 }