@primer/css 20.0.0-rc.f8eae025 → 20.0.0

package/forms/form-validation.scss

@@ -235,15 +235,20 @@ dl.form-group > dd, // TODO: Deprecate
   }
 
   &.focused {
+    border-color: var(--color-accent-fg);
     border-radius: $border-radius;
-    box-shadow: var(--color-primer-shadow-inset), var(--color-primer-shadow-focus);
+    outline: none;
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: 0 0 0 2px var(--color-accent-fg);
 
     .form-control {
+      border-color: transparent;
+      border-bottom-color: var(--color-accent-fg);
       box-shadow: none;
     }
 
     .drag-and-drop {
-      border-color: var(--color-accent-emphasis);
+      border-color: transparent;
     }
   }
 }
@@ -272,7 +277,9 @@ dl.form-group > dd, // TODO: Deprecate
     border: $border-width $border-style var(--color-border-default);
   }
 
-  .comment-form-error { margin-bottom: $spacer-2; }
+  .comment-form-error {
+    margin-bottom: $spacer-2;
+  }
 
   .write-content,
   .preview-content {
@@ -295,7 +302,7 @@ dl.form-group > dd, // TODO: Deprecate
   }
 }
 
-// Used in our boxed-group-less form styles. Give the sumbit button enough space
+// Used in our boxed-group-less form styles. Give the submit button enough space
 // to breathe without the need for the extra hr.
 .form-action-spacious {
   // stylelint-disable-next-line primer/spacing
@@ -317,8 +324,10 @@ div.composer {
   min-height: 200px;
 }
 
-// stylelint-disable-next-line primer/spacing
-.composer .tabnav { margin: 0 0 10px; }
+.composer .tabnav {
+  // stylelint-disable-next-line primer/spacing
+  margin: 0 0 10px;
+}
 
 // Misc CSS
 //

package/forms/input-group.scss

@@ -18,6 +18,20 @@
   &.inline {
     display: inline-table;
   }
+
+  // within input group, if button exists change focus styles to match input (no offset)
+  &:focus-within {
+    // stylelint-disable-next-line selector-max-type
+    button {
+      outline-offset: 0;
+    }
+  }
+
+  // Autocomplete with embedded icon
+  .form-control.autocomplete-embedded-icon-wrap {
+    display: inline-flex;
+    padding: $spacer-1 * 1.25 $spacer-2;
+  }
 }
 
 .input-group .form-control,
@@ -30,6 +44,10 @@
   vertical-align: middle; // Match the inputs
 }
 
+.input-group-button--autocomplete-embedded-icon {
+  vertical-align: bottom;
+}
+
 .input-group .form-control:first-child,
 .input-group-button:first-child .btn {
   border-top-right-radius: 0;

package/labels/labels.scss

@@ -7,7 +7,7 @@
 
 // Default label
 
-.label, // TODO: Deprecte
+.label, // TODO: Deprecate
 .Label {
   @include labels-base;
 
@@ -71,6 +71,16 @@
   border-color: var(--color-danger-emphasis);
 }
 
+.Label--open {
+  color: var(--color-open-fg);
+  border-color: var(--color-open-emphasis);
+}
+
+.Label--closed {
+  color: var(--color-closed-fg);
+  border-color: var(--color-closed-emphasis);
+}
+
 .Label--done {
   color: var(--color-done-fg);
   border-color: var(--color-done-emphasis);

package/labels/mixins.scss

@@ -6,16 +6,20 @@
 
 @mixin labels-base {
   display: inline-block;
+  // stylelint-disable-next-line primer/spacing
   padding: 0 7px;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
   line-height: 18px;
+  white-space: nowrap;
   border: $border-width $border-style transparent;
   border-radius: 2em;
 }
 
 @mixin labels-large {
+  // stylelint-disable-next-line primer/spacing
   padding-right: 10px;
+  // stylelint-disable-next-line primer/spacing
   padding-left: 10px;
   line-height: 22px;
 }
@@ -27,6 +31,7 @@
 
 @mixin labels--inline {
   display: inline;
-  padding: 0.1667em 0.5em;
-  font-size: 0.9em;
+  // stylelint-disable-next-line primer/spacing
+  padding: 0.12em $em-spacer-5;
+  font-size: 85%;
 }

package/labels/states.scss

@@ -28,7 +28,7 @@
 
 .State--open {
   color: var(--color-fg-on-emphasis);
-  background-color: var(--color-success-emphasis);
+  background-color: var(--color-open-emphasis);
 }
 
 .State--merged {
@@ -38,7 +38,7 @@
 
 .State--closed {
   color: var(--color-fg-on-emphasis);
-  background-color: var(--color-danger-emphasis);
+  background-color: var(--color-closed-emphasis);
 }
 
 // Small

package/layout/grid-offset.scss

@@ -2,6 +2,7 @@
 
 // Offset Columns
 
+// stylelint-disable primer/spacing
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     .offset#{$variant}-1 { margin-left: (1 * 0.0833333333 * 100%) !important; }

package/layout/grid.scss

@@ -33,6 +33,7 @@
 
 // Gutters
 // Apply padding and a negative margin to the outside of the container
+// stylelint-disable primer/spacing
 @mixin gutters ($gutter-width: $spacer-3) {
   margin-right: -$gutter-width;
   margin-left: -$gutter-width;

package/layout/index.scss

@@ -4,3 +4,4 @@
 @import './grid.scss';
 @import './grid-offset.scss';
 @import './layout.scss';
+@import './page-layout.scss';

package/layout/layout.scss

@@ -6,18 +6,18 @@
   --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;
     }
   }
@@ -47,7 +47,8 @@
   }
 
   &.Layout--gutter-none {
-    --Layout-gutter: 0;
+    // stylelint-disable-next-line length-zero-no-unit
+    --Layout-gutter: 0px;
   }
 
   &.Layout--gutter-condensed {

package/layout/mixins.scss

@@ -1,4 +1,4 @@
-// Layout mixins
+// Layout alpha mixins
 
 @mixin flow-as-row {
   grid-auto-flow: row;
@@ -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;
+}

package/layout/page-layout.scss

@@ -0,0 +1,384 @@
+// stylelint-disable max-nesting-depth
+// stylelint-disable selector-max-specificity
+// stylelint-disable no-duplicate-selectors
+
+$Layout-divider-color: var(--color-border-default) !default;
+$Layout-responsive-variant-max-breakpoint: 'md' !default;
+
+:root {
+  --Layout-pane-width: #{map-get($sidebar-width, 'sm')};
+  --Layout-content-width: 100%;
+  --Layout-template-columns: 1fr var(--Layout-pane-width);
+  --Layout-template-areas: 'content pane';
+  --Layout-column-gap: #{$spacer-3};
+  --Layout-row-gap: #{$spacer-3};
+
+  // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
+  // stylelint-disable length-zero-no-unit
+  --Layout-outer-spacing-x: 0px; // wrapper margin x
+  --Layout-outer-spacing-y: 0px; // wrapper margin y
+  --Layout-inner-spacing-min: 0px; // default region padding
+  --Layout-inner-spacing-max: 0px; // relaxed content horizontal padding
+  // stylelint-enable length-zero-no-unit
+}
+
+.PageLayout {
+  display: block;
+  // stylelint-disable-next-line primer/spacing
+  margin: var(--Layout-outer-spacing-y) var(--Layout-outer-spacing-x);
+
+  // multi-column desktop-friendly layout
+
+  @include breakpoint($Layout-responsive-variant-max-breakpoint) {
+
+    // Set a `content` region width, to work with loading states when
+    // `pane` is not yet loaded. See https://github.com/primer/css/pull/1818
+    $Layout-content-full-width: minmax(0, calc(100% - var(--Layout-pane-width) - var(--Layout-column-gap)));
+
+    &.PageLayout--panePos-start {
+      --Layout-template-columns: var(--Layout-pane-width) #{$Layout-content-full-width};
+      --Layout-template-areas: 'pane content';
+    }
+
+    &.PageLayout--panePos-end {
+      --Layout-template-columns: #{$Layout-content-full-width} var(--Layout-pane-width);
+      --Layout-template-areas: 'content pane';
+    }
+
+    // header divider
+
+    .PageLayout-header--hasDivider {
+      // stylelint-disable-next-line primer/spacing
+      padding-bottom: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
+      // stylelint-disable-next-line primer/borders
+      border-bottom: $border-width solid $Layout-divider-color;
+    }
+
+    // footer divider
+
+    .PageLayout-footer--hasDivider {
+      // stylelint-disable-next-line primer/spacing
+      padding-top: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
+      // stylelint-disable-next-line primer/borders
+      border-top: $border-width solid $Layout-divider-color;
+    }
+
+    // pane divider
+
+    &.PageLayout--hasPaneDivider {
+      &.PageLayout--panePos-start {
+        .PageLayout-pane {
+          // stylelint-disable-next-line primer/borders
+          border-right: $border-width solid $Layout-divider-color;
+        }
+
+        &:not(.PageLayout--columnGap-none) {
+          .PageLayout-pane {
+            // stylelint-disable-next-line primer/spacing
+            padding-right: calc(var(--Layout-column-gap) - #{$border-width});
+            // stylelint-disable-next-line primer/spacing
+            margin-right: calc(var(--Layout-column-gap) * -1);
+          }
+
+          .PageLayout-content {
+            // stylelint-disable-next-line primer/spacing
+            margin-left: var(--Layout-column-gap);
+          }
+        }
+      }
+
+      &.PageLayout--panePos-end {
+        .PageLayout-pane {
+          // stylelint-disable-next-line primer/borders
+          border-left: $border-width solid $Layout-divider-color;
+        }
+
+        &:not(.PageLayout--columnGap-none) {
+          .PageLayout-pane {
+            // stylelint-disable-next-line primer/spacing
+            padding-left: calc(var(--Layout-column-gap) - #{$border-width});
+            // stylelint-disable-next-line primer/spacing
+            margin-left: calc(var(--Layout-column-gap) * -1);
+          }
+
+          .PageLayout-content {
+            // stylelint-disable-next-line primer/spacing
+            margin-right: var(--Layout-column-gap);
+          }
+        }
+      }
+    }
+
+    // sticky pane
+
+    &.PageLayout--isPaneSticky {
+      .PageLayout-pane {
+        position: sticky;
+        top: 0;
+        max-height: 100vh;
+        overflow: auto;
+      }
+    }
+
+    // content width
+
+    [class^='PageLayout-content-centered-'] {
+      max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap));
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    &.PageLayout--hasPaneDivider {
+      [class^='PageLayout-content-centered-'] {
+        max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + (var(--Layout-column-gap) * 2));
+      }
+    }
+
+    &.PageLayout--panePos-start {
+      [class^='PageLayout-content-centered-'] > [class^='container-'] {
+        margin-left: 0;
+      }
+    }
+
+    &.PageLayout--panePos-end {
+      [class^='PageLayout-content-centered-'] > [class^='container-'] {
+        margin-right: 0;
+      }
+    }
+
+    @each $breakpoint in map-keys($breakpoints) {
+      .PageLayout-content-centered-#{$breakpoint} {
+        --Layout-content-width: #{map-get($breakpoints, $breakpoint)};
+      }
+    }
+
+    // pane width
+
+    @each $breakpoint in map-keys($sidebar-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-pane-width: #{map-get($sidebar-width, $breakpoint)};
+      }
+    }
+
+    &.PageLayout--paneWidth-narrow {
+      @each $breakpoint in map-keys($sidebar-narrow-width) {
+        @include breakpoint($breakpoint) {
+          --Layout-pane-width: #{map-get($sidebar-narrow-width, $breakpoint)};
+        }
+      }
+    }
+
+    &.PageLayout--paneWidth-wide {
+      @each $breakpoint in map-keys($sidebar-wide-width) {
+        @include breakpoint($breakpoint) {
+          --Layout-pane-width: #{map-get($sidebar-wide-width, $breakpoint)};
+        }
+      }
+    }
+  }
+
+  // responsive behaviors on narrow viewports
+
+  @media (max-width: #{map-get($breakpoints, $Layout-responsive-variant-max-breakpoint) - 0.02px}) {
+
+    // variant: stackRegions
+
+    &.PageLayout--responsive-stackRegions {
+      --Layout-template-columns: 1fr;
+
+      // responsive-panePos: end (default)
+      --Layout-template-areas: 'content' 'pane';
+
+      // responsive-panePos: start
+      &.PageLayout--responsive-panePos-start {
+        --Layout-template-areas: 'pane' 'content';
+      }
+    }
+
+    // variant: separateRegions
+
+    &.PageLayout--responsive-separateRegions {
+      --Layout-template-columns: 1fr;
+      --Layout-template-areas: 'content';
+
+      &.PageLayout--responsive-primary-content {
+        --Layout-template-areas: 'content';
+
+        .PageLayout-pane {
+          display: none;
+        }
+      }
+
+      &.PageLayout--responsive-primary-pane {
+        --Layout-template-areas: 'pane';
+
+        .PageLayout-content {
+          display: none;
+        }
+      }
+    }
+
+    // region dividers on narrow viewports
+
+    .PageLayout-region--dividerNarrow-line-before {
+      position: relative;
+      // stylelint-disable-next-line primer/spacing
+      margin-top: var(--Layout-row-gap);
+
+      &::before {
+        @include Layout-line-divider;
+
+        top: calc(#{$border-width * -1} - var(--Layout-row-gap));
+      }
+    }
+
+    .PageLayout-region--dividerNarrow-line-after {
+      position: relative;
+      // stylelint-disable-next-line primer/spacing
+      margin-bottom: var(--Layout-row-gap);
+
+      &::after {
+        @include Layout-line-divider;
+
+        bottom: calc(#{$border-width * -1} - var(--Layout-row-gap));
+      }
+    }
+
+    .PageLayout-region--dividerNarrow-filled-before {
+      position: relative;
+      // stylelint-disable-next-line primer/spacing
+      margin-top: calc(#{$spacer-2} + var(--Layout-row-gap));
+
+      &::after {
+        @include Layout-filled-divider;
+
+        top: calc(#{$spacer-2 * -1} - var(--Layout-row-gap));
+      }
+    }
+
+    .PageLayout-region--dividerNarrow-filled-after {
+      position: relative;
+      // stylelint-disable-next-line primer/spacing
+      margin-bottom: calc(#{$spacer-2} + var(--Layout-row-gap));
+
+      &::before {
+        @include Layout-filled-divider;
+
+        bottom: calc(#{$spacer-2 * -1} - var(--Layout-row-gap));
+      }
+    }
+  }
+}
+
+// PageLayout-wrapper bundles header, footer, pane, and content regions
+.PageLayout-wrapper {
+  display: grid;
+  grid: auto-flow / 1fr;
+  row-gap: var(--Layout-row-gap);
+}
+
+// PageLayout-columns wrap pane and content regions
+// If layout has no pane, PageLayout-columns is not present
+.PageLayout-columns {
+  display: grid;
+  column-gap: var(--Layout-column-gap);
+  row-gap: var(--Layout-row-gap);
+  grid-template-columns: var(--Layout-template-columns);
+  grid-template-rows: 1fr;
+  grid-template-areas: var(--Layout-template-areas);
+
+  .PageLayout-content {
+    // stylelint-disable-next-line primer/spacing
+    padding-right: var(--Layout-inner-spacing-max);
+    // stylelint-disable-next-line primer/spacing
+    padding-left: var(--Layout-inner-spacing-max);
+    grid-area: content;
+  }
+
+  .PageLayout-pane {
+    grid-area: pane;
+  }
+}
+
+// outer spacing
+
+.PageLayout--outerSpacing-normal {
+  --Layout-outer-spacing-x: #{$spacer-3};
+  --Layout-outer-spacing-y: #{$spacer-3};
+
+  @include breakpoint(lg) {
+    --Layout-outer-spacing-x: #{$spacer-4};
+    --Layout-outer-spacing-y: #{$spacer-4};
+  }
+}
+
+.PageLayout--outerSpacing-condensed {
+  --Layout-outer-spacing-x: #{$spacer-3};
+  --Layout-outer-spacing-y: #{$spacer-3};
+}
+
+// inner spacing
+
+.PageLayout--innerSpacing-normal {
+  --Layout-inner-spacing-min: #{$spacer-3};
+  --Layout-inner-spacing-max: #{$spacer-3};
+
+  @include breakpoint(lg) {
+    --Layout-inner-spacing-max: #{$spacer-4};
+  }
+}
+
+.PageLayout--innerSpacing-condensed {
+  --Layout-inner-spacing-min: #{$spacer-3};
+  --Layout-inner-spacing-max: #{$spacer-3};
+}
+
+// column gap
+
+.PageLayout--columnGap-normal {
+  --Layout-column-gap: #{$spacer-3};
+
+  @include breakpoint(lg) {
+    --Layout-column-gap: #{$spacer-4};
+  }
+}
+
+.PageLayout--columnGap-condensed {
+  --Layout-column-gap: #{$spacer-3};
+}
+
+.PageLayout--columnGap-none {
+  // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
+  // stylelint-disable-next-line length-zero-no-unit
+  --Layout-column-gap: 0px;
+}
+
+// row gap
+
+.PageLayout--rowGap-normal {
+  --Layout-row-gap: #{$spacer-3};
+
+  @include breakpoint(lg) {
+    --Layout-row-gap: #{$spacer-4};
+  }
+}
+
+.PageLayout--rowGap-none {
+  // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
+  // stylelint-disable length-zero-no-unit
+  --Layout-row-gap: 0px;
+}
+
+.PageLayout--rowGap-condensed {
+  --Layout-row-gap: #{$spacer-3};
+}
+
+// regions
+
+.PageLayout-header,
+.PageLayout-content,
+.PageLayout-pane,
+.PageLayout-footer {
+  // stylelint-disable-next-line primer/spacing
+  padding: var(--Layout-inner-spacing-min);
+}

package/links/link.scss

@@ -7,6 +7,11 @@
     text-decoration: underline;
     cursor: pointer;
   }
+
+  &:focus,
+  &:focus-visible {
+    outline-offset: 0;
+  }
 }
 
 .Link--primary {
@@ -49,7 +54,7 @@
 .Link--secondary,
 .Link--primary,
 .Link--muted {
-  &:hover [class*='color-text'] {
+  &:hover [class*='color-fg'] {
     color: inherit !important;
   }
 }

package/markdown/code.scss

@@ -16,6 +16,11 @@
 
   del code { text-decoration: inherit; }
 
+  samp {
+    // stylelint-disable-next-line primer/typography
+    font-size: 85%;
+  }
+
   pre {
     word-wrap: normal;