@primer/css 0.0.0-2021116205147 → 0.0.0-2021117221921

package/labels/labels.scss

@@ -10,6 +10,7 @@
 .label, // TODO: Deprecte
 .Label {
   @include labels-base;
+  background-color: transparent !important; // TODO: Remove again
   border-color: var(--color-border-default);
 
   &:hover {

package/layout/index.scss

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

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 {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: $Layout-divider-color;
+  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
+  height: 1px;
+  left: calc(var(--Layout-outer-spacing-x) * -1);
+}
+
+@mixin Layout-filled-divider {
+  content: "";
+  display: block;
+  position: absolute;
+  left: calc(var(--Layout-outer-spacing-x) * -1);
+  bottom: calc(#{$spacer-2} * -1); // -8px
+  width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
+  height: #{$spacer-2}; // 8px
+  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,391 @@
+// component id
+
+$Layout: 'PageLayout' !default;
+$Layout-divider-color: red !default; // var(--color-border-default)
+$Layout-responsive-variant-max-breakpoint: 'md';
+
+// Prop names
+
+// dividers
+$Layout-prop-pane-divider: 'has-pane-divider' !default;
+$Layout-prop-header-divider: 'has-header-divider' !default;
+$Layout-prop-footer-divider: 'has-footer-divider' !default;
+
+// pane region
+$Layout-prop-pane-position: 'pane-position' !default;
+$Layout-prop-pane-width: 'pane-width' !default;
+$Layout-prop-pane-is-sticky: 'is-pane-sticky' !default;
+
+// content region
+$Layout-prop-content-width: 'content-width' !default;
+
+// stackRegions-specific variants
+$Layout-prop-stackRegions-pane-position: 'stackRegions-pane-position' !default;
+
+// separateRegions-specific variants
+$Layout-prop-separateRegions-primary-region: 'primary' !default;
+
+:root {
+  --Layout-pane-width: #{map-get($sidebar-width, 'sm')};
+  --Layout-content-width: 100%;
+  // stylelint-disable-next-line primer/no-undefined-vars
+  --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
+}
+
+.#{$Layout} {
+  // stylelint-disable-next-line primer/spacing
+  margin: var(--Layout-outer-spacing-y) var(--Layout-outer-spacing-x);
+
+  > .#{$Layout}-wrapper {
+    display: grid;
+    grid: auto-flow / 1fr;
+    row-gap: var(--Layout-row-gap);
+
+    > .#{$Layout}-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);
+    }
+  }
+
+  // outer spacing
+
+  &.#{$Layout}--outer-spacing-normal {
+    --Layout-outer-spacing-x: #{$spacer-3}; // 16px
+    --Layout-outer-spacing-y: #{$spacer-3}; // 16px
+
+    @include breakpoint(lg) {
+      --Layout-outer-spacing-x: #{$spacer-4}; // 24px
+      --Layout-outer-spacing-y: #{$spacer-4}; // 24px
+    }
+  }
+
+  &.#{$Layout}--outer-spacing-condensed {
+    --Layout-outer-spacing-x: #{$spacer-3}; // 16px
+    --Layout-outer-spacing-y: #{$spacer-3}; // 16px
+  }
+
+  // inner spacing
+
+  &.#{$Layout}--inner-spacing-normal {
+    --Layout-inner-spacing-min: #{$spacer-3}; // 16px
+    --Layout-inner-spacing-max: #{$spacer-3}; // 16px
+
+    @include breakpoint(lg) {
+      --Layout-inner-spacing-max: #{$spacer-4}; // 24px
+    }
+  }
+
+  &.#{$Layout}--inner-spacing-condensed {
+    --Layout-inner-spacing-min: #{$spacer-3}; // 16px
+    --Layout-inner-spacing-max: #{$spacer-3}; // 16px
+  }
+
+  // column gap
+
+  &.#{$Layout}--column-gap-normal {
+    --Layout-column-gap: #{$spacer-3}; // 16px
+
+    @include breakpoint(lg) {
+      --Layout-column-gap: #{$spacer-4}; // 24px
+    }
+  }
+
+  &.#{$Layout}--column-gap-condensed {
+    --Layout-column-gap: #{$spacer-3}; // 16px
+  }
+
+  &.#{$Layout}--column-gap-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
+
+  &.#{$Layout}--row-gap-normal {
+    --Layout-row-gap: #{$spacer-3}; // 16px
+
+    @include breakpoint(lg) {
+      --Layout-row-gap: #{$spacer-4}; // 24px
+    }
+  }
+
+  &.#{$Layout}--row-gap-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;
+  }
+
+  &.#{$Layout}--row-gap-condensed {
+    --Layout-row-gap: #{$spacer-3}; // 16px
+  }
+
+  // regions
+
+  .#{$Layout}-header, .#{$Layout}-content, .#{$Layout}-pane, .#{$Layout}-footer {
+    // stylelint-disable-next-line primer/spacing
+    padding: var(--Layout-inner-spacing-min);
+  }
+  
+  .#{$Layout}-header {
+    background: lightpink;
+  }
+
+  .#{$Layout}-content {
+    // stylelint-disable primer/spacing
+    padding-left: var(--Layout-inner-spacing-max);
+    padding-right: var(--Layout-inner-spacing-max);
+    // stylelint-enable primer/spacing
+    grid-area: content;
+    background: rgb(255, 197, 253);
+  }
+
+  .#{$Layout}-pane {
+    grid-area: pane;
+    background: rgb(215, 255, 233);
+  }
+
+  .#{$Layout}-footer {
+    background: lightyellow;
+  }
+
+  // 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)));
+
+    &.#{$Layout}--pane-position-start {
+      --Layout-template-columns: var(--Layout-pane-width) #{$Layout-content-full-width};
+      --Layout-template-areas: "pane content";
+    }
+
+    &.#{$Layout}--pane-position-end {
+      --Layout-template-columns: #{$Layout-content-full-width} var(--Layout-pane-width);
+      --Layout-template-areas: "content pane";
+    }
+
+    // header divider
+
+    &.#{$Layout}--#{$Layout-prop-header-divider} {
+      .#{$Layout}-header {
+        padding-bottom: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
+        border-bottom: 1px solid $Layout-divider-color;
+      }
+    }
+
+    // footer divider
+
+    &.#{$Layout}--#{$Layout-prop-footer-divider} {
+      .#{$Layout}-footer {
+        padding-top: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
+        border-top: 1px solid $Layout-divider-color;
+      }
+    }
+
+
+    // pane divider
+
+    &.#{$Layout}--#{$Layout-prop-pane-divider} {
+      &.#{$Layout}--pane-position-start {
+        .#{$Layout}-pane {
+          border-right: 1px solid $Layout-divider-color;
+        }
+
+        &:not(.#{$Layout}--column-gap-none) {
+          .#{$Layout}-pane {
+            margin-right: calc(var(--Layout-column-gap) * -1);
+            padding-right: calc(var(--Layout-column-gap) - 1px);
+          }
+          .#{$Layout}-content {
+            margin-left: var(--Layout-column-gap);
+          }
+        }
+      }
+
+      &.#{$Layout}--pane-position-end {
+        .#{$Layout}-pane {
+          border-left: 1px solid $Layout-divider-color;
+        }
+
+        &:not(.#{$Layout}--column-gap-none) {
+          .#{$Layout}-pane {
+            margin-left: calc(var(--Layout-column-gap) * -1);
+            padding-left: calc(var(--Layout-column-gap) - 1px); 
+          }
+          .#{$Layout}-content {
+            margin-right: var(--Layout-column-gap);
+          }
+        }
+      }
+    }
+
+    // sticky pane
+
+    &.#{$Layout}--is-pane-sticky {
+      .#{$Layout}-pane {
+        position: sticky;
+        top: 0;
+        max-height: 100vh;
+        overflow: auto;
+      }
+    }
+
+    // content width
+
+    [class^="#{$Layout}-content-centered-"] {
+      max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap));
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    &.#{$Layout}--#{$Layout-prop-pane-divider} {
+      [class^="#{$Layout}-content-centered-"] {
+        max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + (var(--Layout-column-gap) * 2));
+      }
+    }
+
+    &.#{$Layout}--pane-position-start {
+      [class^="#{$Layout}-content-centered-"] > [class^='container-'] {
+        margin-left: 0;
+      }
+    }
+
+    &.#{$Layout}--pane-position-end {
+      [class^="#{$Layout}-content-centered-"] > [class^='container-'] {
+        margin-right: 0;
+      }
+    }
+
+    @each $breakpoint in map-keys($breakpoints) {
+      .#{$Layout}-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)};
+      }
+    }
+
+    &.#{$Layout}--#{$Layout-prop-pane-width}-narrow {
+      @each $breakpoint in map-keys($sidebar-narrow-width) {
+        @include breakpoint($breakpoint) {
+          --Layout-pane-width: #{map-get($sidebar-narrow-width, $breakpoint)};
+        }
+      }
+    }
+
+    &.#{$Layout}--#{$Layout-prop-pane-width}-wide {
+      @each $breakpoint in map-keys($sidebar-wide-width) {
+        @include breakpoint($breakpoint) {
+          --Layout-pane-width: #{map-get($sidebar-wide-width, $breakpoint)};
+        }
+      }
+    }
+  }
+
+  // responsive variants
+
+  @media (max-width: #{map-get($breakpoints, $Layout-responsive-variant-max-breakpoint) - 0.02px}) {
+
+    // variant: stackRegions
+
+    &.#{$Layout}--variant-stackRegions {
+      --Layout-template-columns: 1fr;
+  
+      // responsive-pane-position: end (default)
+      --Layout-template-areas: 'content' 'pane';
+  
+      // responsive-pane-position: start
+      &.#{$Layout}--#{$Layout-prop-stackRegions-pane-position}-start {
+        --Layout-template-areas: 'pane' 'content';
+      }
+    }
+
+    // variant: separateRegions
+
+    &.#{$Layout}--variant-separateRegions {
+      --Layout-template-columns: 1fr;
+      --Layout-template-areas: 'content';
+
+      &.#{$Layout}--#{$Layout-prop-separateRegions-primary-region}-content {
+        --Layout-template-areas: 'content';
+        .#{$Layout}-pane {
+          display: none;
+        }
+      }
+
+      &.#{$Layout}--#{$Layout-prop-separateRegions-primary-region}-pane {
+        --Layout-template-areas: 'pane';
+        .#{$Layout}-content {
+          display: none;
+        }
+      }
+    }
+
+    // region dividers for responsive variants
+
+    .#{$Layout}-region--hasDivider-line-before {
+      position: relative;
+      margin-top: var(--Layout-row-gap);
+    
+      &:before {
+        @include Layout-line-divider;
+        top: calc(-1px - var(--Layout-row-gap));
+      }
+    }
+    
+    .#{$Layout}-region--hasDivider-line-after {
+      position: relative;
+      margin-bottom: var(--Layout-row-gap);
+    
+      &:after {
+        @include Layout-line-divider;
+        bottom: calc(-1px - var(--Layout-row-gap));
+      } 
+    }
+    
+    .#{$Layout}-region--hasDivider-filled-before {
+      position: relative;
+      margin-top: calc(#{$spacer-2} + var(--Layout-row-gap));
+    
+      &:after {
+        @include Layout-filled-divider;
+        top: calc(#{$spacer-2 * -1} - var(--Layout-row-gap));
+      }
+    }
+    
+    .#{$Layout}-region--hasDivider-filled-after {
+      position: relative;
+      margin-bottom: calc(#{$spacer-2} + var(--Layout-row-gap));
+    
+      &:before {
+        @include Layout-filled-divider;
+        bottom: calc(#{$spacer-2 * -1} - var(--Layout-row-gap));
+      }
+    }
+  }
+
+}

package/marketing/buttons/button.scss

@@ -2,137 +2,95 @@
   position: relative;
   z-index: 1;
   display: inline-block;
+  appearance: none !important;
   // stylelint-disable-next-line primer/spacing
   padding: 0.9rem 1.5rem 1.1rem;
   // stylelint-disable-next-line primer/typography
   font-size: 1rem;
   font-weight: $font-weight-bold;
   line-height: 1;
-  color: var(--color-canvas-default);
-  text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%), var(--color-mktg-btn-bg) !important;
   border: 0;
   // stylelint-disable-next-line primer/borders
   border-radius: 0.375rem;
-  transition: box-shadow 0.2s;
-  appearance: none !important;
+
+  @include btn-solid-mktg(
+    var(--color-mktg-btn-text),
+    var(--color-mktg-btn-bg-top),
+    var(--color-mktg-btn-bg-bottom),
+    var(--color-mktg-btn-bg-overlay-top),
+    var(--color-mktg-btn-bg-overlay-bottom),
+  );
 
   &::before {
+    background-blend-mode: overlay, normal;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: -1;
-    content: '';
-    // stylelint-disable-next-line primer/colors
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;
-    border-radius: inherit;
+    content: "";
+    // stylelint-disable-next-line primer/borders
+    border-radius: 0.375rem;
     opacity: 0;
-    opacity: 0;
-    transition: opacity 0.2s;
-    background-blend-mode: normal;
+    transition: opacity 0.4s;
   }
 
   &:hover {
-    box-shadow: var(--color-mktg-btn-shadow-hover) !important;
-  }
+    text-decoration: none;
 
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: var(--color-mktg-btn-shadow-focus), var(--color-mktg-btn-shadow-hover) !important;
-  }
-
-  &:hover,
-  &:focus,
-  &.focus {
     &::before {
       opacity: 1;
-    }
-
-    &:disabled {
-      box-shadow: none !important;
-    }
-  }
-
-  &:active {
-    outline: none;
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 transparent;
-
-    &::before {
-      opacity: 0.5 !important;
+      transition: opacity 0.4s;
     }
   }
 }
 
-.btn-muted-mktg {
-  color: var(--color-fg-default) !important;
-  background: none !important;
-  box-shadow: var(--color-mktg-btn-shadow-outline);
-
-  &::before {
-    display: none;
-  }
-
-  &:hover {
-    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
-  }
-
-  &:focus,
-  &.focus {
-    box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
-  }
-
-  &:active {
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
-  }
-
-  &:disabled {
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;
-  }
+.btn-primary-mktg {
+  @include btn-solid-mktg(
+    var(--color-mktg-btn-primary-text),
+    var(--color-mktg-btn-primary-bg-top),
+    var(--color-mktg-btn-primary-bg-bottom),
+    var(--color-mktg-btn-primary-bg-overlay-top),
+    var(--color-mktg-btn-primary-bg-overlay-bottom),
+  );
 }
 
-.btn-subtle-mktg {
-  color: var(--color-fg-default) !important;
-  background: none !important;
-  box-shadow: none !important;
-
-  &::before {
-    background: none !important;
-  }
-
-  &:hover {
-    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
-  }
-
-  &:focus,
-  .focus {
-    box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
-  }
+.btn-enterprise-mktg {
+  @include btn-solid-mktg(
+    var(--color-mktg-btn-enterprise-text),
+    var(--color-mktg-btn-enterprise-bg-top),
+    var(--color-mktg-btn-enterprise-bg-bottom),
+    var(--color-mktg-btn-enterprise-bg-overlay-top),
+    var(--color-mktg-btn-enterprise-bg-overlay-bottom),
+  );
 }
 
-.btn-signup-mktg {
-  // stylelint-disable-next-line primer/colors
-  color: #fff;
-  // stylelint-disable-next-line primer/colors
-  background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
-
-  &::before {
-    // stylelint-disable-next-line primer/colors
-    background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
-  }
+.btn-outline-mktg {
+  @include btn-outline-mktg(
+    var(--color-mktg-btn-outline-text),
+    var(--color-mktg-btn-outline-hover-text),
+    var(--color-mktg-btn-outline-border),
+    var(--color-mktg-btn-outline-hover-border),
+    var(--color-mktg-btn-outline-focus-border),
+    var(--color-mktg-btn-outline-focus-border-inset)
+  );
+  transition: box-shadow 0.4s, color 0.4s;
+}
 
-  &:focus {
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: rgba(46, 164, 79, 0.45) 0 0 0 4px !important;
-  }
+.btn-transparent {
+  @include btn-outline-mktg(
+    var(--color-mktg-btn-dark-text),
+    var(--color-mktg-btn-dark-hover-text),
+    var(--color-mktg-btn-dark-border),
+    var(--color-mktg-btn-dark-hover-border),
+    var(--color-mktg-btn-dark-focus-border),
+    var(--color-mktg-btn-dark-focus-border-inset)
+  );
+  transition: box-shadow 0.4s, color 0.4s;
 }
 
 // Size modifiers

package/marketing/buttons/index.scss

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

package/marketing/support/index.scss

@@ -1,2 +1,3 @@
-@import '../../support/index.scss';
-@import './variables.scss';
+@import "../../support/index.scss";
+@import "./mixins.scss";
+@import "./variables.scss";