@primer/css 0.0.0-2021986475 → 0.0.0-20220107003629

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,7 +67,7 @@ dl.form-group > dd, // TODO: Deprecate
 .status-indicator-success {
   // Override primer
   &::before {
-    content: "";
+    content: '';
   }
 
   .octicon-check {
@@ -84,7 +84,7 @@ dl.form-group > dd, // TODO: Deprecate
 .status-indicator-failed {
   // Override primer
   &::before {
-    content: "";
+    content: '';
   }
 
   .octicon-check {
@@ -100,7 +100,7 @@ dl.form-group > dd, // TODO: Deprecate
 
 .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;

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/radio-group.scss

@@ -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/index.scss

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

package/index.scss

@@ -11,9 +11,9 @@
 // Should you need specific files, you can easily use separate `@import`s.
 
 // CSS color variables
-@import "./color-modes/index.scss";
+@import './color-modes/index.scss';
 
 // Global requirements
-@import "./core/index.scss";
-@import "./product/index.scss";
-@import "./marketing/index.scss";
+@import './core/index.scss';
+@import './product/index.scss';
+@import './marketing/index.scss';

package/labels/counters.scss

@@ -11,7 +11,7 @@
   color: var(--color-fg-default);
   text-align: center;
   background-color: var(--color-neutral-muted);
-  border: $border-width $border-style transparent; // Support Firefox custom colors
+  border: $border-width $border-style var(--color-counter-border);
   // stylelint-disable-next-line primer/borders
   border-radius: 2em;
 

package/labels/index.scss

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

package/labels/labels.scss

@@ -10,7 +10,7 @@
 .label, // TODO: Deprecte
 .Label {
   @include labels-base;
-  background-color: transparent !important; // TODO: Remove again
+
   border-color: var(--color-border-default);
 
   &:hover {
@@ -30,7 +30,7 @@
   @include labels--inline;
 }
 
-// Colors
+// Contrast
 
 .Label--primary {
   color: var(--color-fg-default);
@@ -42,7 +42,10 @@
   border-color: var(--color-border-default);
 }
 
-.Label--info {
+// Colors
+
+.Label--info, // TODO: deprecate
+.Label--accent {
   color: var(--color-accent-fg);
   border-color: var(--color-accent-emphasis);
 }
@@ -52,12 +55,28 @@
   border-color: var(--color-success-emphasis);
 }
 
-.Label--warning {
+.Label--warning, // TODO: deprecate
+.Label--attention {
   color: var(--color-attention-fg);
   border-color: var(--color-attention-emphasis);
 }
 
+.Label--severe {
+  color: var(--color-severe-fg);
+  border-color: var(--color-severe-emphasis);
+}
+
 .Label--danger {
   color: var(--color-danger-fg);
   border-color: var(--color-danger-emphasis);
 }
+
+.Label--done {
+  color: var(--color-done-fg);
+  border-color: var(--color-done-emphasis);
+}
+
+.Label--sponsors {
+  color: var(--color-sponsors-fg);
+  border-color: var(--color-sponsors-emphasis);
+}

package/layout/grid.scss

@@ -37,7 +37,7 @@
   margin-right: -$gutter-width;
   margin-left: -$gutter-width;
 
-  > [class*="col-"] {
+  > [class*='col-'] {
     padding-right: $gutter-width !important;
     padding-left: $gutter-width !important;
   }

package/layout/index.scss

@@ -1,7 +1,7 @@
-@import "../support/index.scss";
-@import "./mixins.scss";
-
-@import "./container.scss";
-@import "./grid.scss";
-@import "./grid-offset.scss";
-@import "./layout.scss";
+@import '../support/index.scss';
+@import './mixins.scss';
+@import './container.scss';
+@import './grid.scss';
+@import './grid-offset.scss';
+@import './layout.scss';
+@import './page-layout.scss';

package/layout/layout.scss

@@ -2,21 +2,22 @@
 
 .Layout {
   display: grid;
-  --Layout-sidebar-width: #{map-get($sidebar-width, "sm")};
+
+  --Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
   --Layout-gutter: 16px;
 
-  @media (max-width: calc(#{$width-sm} - 1px)) {
+  @media (max-width: calc(#{$width-sm} - 0.02px)) {
     @include flow-as-row;
   }
 
   &.Layout--flowRow-until-md {
-    @media (max-width: calc(#{$width-md} - 1px)) {
+    @media (max-width: calc(#{$width-md} - 0.02px)) {
       @include flow-as-row;
     }
   }
 
   &.Layout--flowRow-until-lg {
-    @media (max-width: calc(#{$width-lg} - 1px)) {
+    @media (max-width: calc(#{$width-lg} - 0.02px)) {
       @include flow-as-row;
     }
   }
@@ -24,8 +25,7 @@
   // Flow as column
 
   grid-auto-flow: column;
-  grid-template-columns: auto 0 1fr; // sidebar column, separator, main column
-  // stylelint-disable-next-line primer/no-undefined-vars
+  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); // sidebar column, separator, main column
   grid-gap: var(--Layout-gutter);
 
   .Layout-sidebar {
@@ -101,7 +101,7 @@
   }
 
   &.Layout--sidebarPosition-end {
-    grid-template-columns: 1fr 0 auto;
+    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;
 
     .Layout-main {
       grid-column: 1;
@@ -146,7 +146,6 @@
 }
 
 .Layout-sidebar {
-  // stylelint-disable-next-line primer/no-undefined-vars
   width: var(--Layout-sidebar-width);
 }
 
@@ -169,17 +168,14 @@
   }
 
   .Layout-main-centered-md {
-    // stylelint-disable-next-line primer/no-undefined-vars
     max-width: calc(#{$container-md} + var(--Layout-sidebar-width) + var(--Layout-gutter));
   }
 
   .Layout-main-centered-lg {
-    // stylelint-disable-next-line primer/no-undefined-vars
     max-width: calc(#{$container-lg} + var(--Layout-sidebar-width) + var(--Layout-gutter));
   }
 
   .Layout-main-centered-xl {
-    // stylelint-disable-next-line primer/no-undefined-vars
     max-width: calc(#{$container-xl} + var(--Layout-sidebar-width) + var(--Layout-gutter));
   }
 }

package/layout/mixins.scss

@@ -1,4 +1,4 @@
-// Layout mixins
+// Layout alpha mixins
 
 @mixin flow-as-row {
   grid-auto-flow: row;
@@ -7,9 +7,9 @@
   .Layout-sidebar,
   .Layout-divider,
   .Layout-main {
-      width: 100% !important;
-      grid-column: 1 !important;
-    }
+    width: 100% !important;
+    grid-column: 1 !important;
+  }
 
   &.Layout--sidebarPosition-flowRow-start {
     .Layout-sidebar {
@@ -77,3 +77,29 @@
     }
   }
 }
+
+// Layout beta mixins
+
+// responsive region dividers
+
+@mixin Layout-line-divider {
+  position: absolute;
+  left: calc(var(--Layout-outer-spacing-x) * -1);
+  display: block;
+  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
+  height: 1px;
+  content: '';
+  background-color: $Layout-divider-color;
+}
+
+@mixin Layout-filled-divider {
+  position: absolute;
+  bottom: calc(#{$spacer-2} * -1); // -8px
+  left: calc(var(--Layout-outer-spacing-x) * -1);
+  display: block;
+  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
+  height: #{$spacer-2}; // 8px
+  content: '';
+  background-color: var(--color-canvas-inset);
+  box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
+}