@primer/css 0.0.0-2021102331850 → 0.0.0-2021102434749

package/support/mixins/misc.scss

@@ -10,7 +10,7 @@
     width: 8px;
     height: 16px;
     pointer-events: none;
-    content: " ";
+    content: ' ';
     clip-path: polygon(0 50%, 100% 0, 100% 100%);
   }
 
@@ -24,3 +24,27 @@
     background-color: $border;
   }
 }
+
+// global focus styles
+
+@mixin focusOutline {
+  z-index: 1;
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: 2px;
+}
+
+// if min-width is undefined, return only min-height
+@mixin minTouchTarget($min-height: 32px, $min-width: '') {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  min-height: $min-height;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+
+  @if $min-width != '' {
+    min-width: $min-width;
+  }
+}

package/support/variables/layout.scss

@@ -150,11 +150,11 @@ $breakpoints: (
 // breakpoints and create both responsive and non-responsive classes in one
 // loop:
 $responsive-variants: (
-  "": "",
-  sm: "-sm",
-  md: "-md",
-  lg: "-lg",
-  xl: "-xl",
+  '': '',
+  sm: '-sm',
+  md: '-md',
+  lg: '-lg',
+  xl: '-xl',
 ) !default;
 
 // responive utility position values
@@ -178,8 +178,9 @@ $sidebar-narrow-width: (
 ) !default;
 
 $sidebar-wide-width: (
+  md: 296px,
   lg: 320px,
-  xl: 336px
+  xl: 344px
 ) !default;
 
 $gutter: (
@@ -198,4 +199,4 @@ $gutter-spacious: (
   md: $spacer-4,
   lg: $spacer-5,
   xl: $spacer-6
-) !default;
+) !default;

package/support/variables/typography.scss

@@ -32,7 +32,7 @@ $lh-condensed: 1.25 !default;
 $lh-default: 1.5 !default;
 
 // Font stacks
-$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default;
+$body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !default;
 
 // Monospace font stack
 // Note: SFMono-Regular needs to come before SF Mono to fix an older version of the font in Chrome

package/layout/layout-beta.scss

@@ -1,497 +0,0 @@
-// Component className
-
-$Layout: "LayoutBeta" !default;
-$Layout-divider-color: red !default; // var(--color-border-default)
-
-// Property modifier names
-
-$Layout-prop-wrapper-sizing:            "wrapper-sizing" !default;           // size?
-
-$Layout-prop-outer-spacing:             "outer-spacing" !default;            // outer-m?
-$Layout-prop-inner-spacing:             "inner-spacing" !default;            // inner-p?
-$Layout-prop-column-gap:                "column-gap" !default;
-$Layout-prop-row-gap:                   "row-gap" !default;
-
-$Layout-prop-pane-divider:              "pane-divider" !default;
-$Layout-prop-header-divider:            "header-divider" !default;
-$Layout-prop-footer-divider:            "footer-divider" !default;
-
-$Layout-prop-pane-position:             "pane-position" !default;            // pane-pos?
-$Layout-prop-pane-width:                "pane-width" !default;               // pane-w?
-$Layout-prop-pane-is-sticky:            "pane-is-sticky" !default;           // pane-sticky?
-$Layout-prop-content-width:             "content-width" !default;            // content-w?
-
-$Layout-prop-flow-horizontal:           "flow-horizontal" !default;          // flow-h?
-$Layout-prop-responsive-behavior:       "responsive" !default;               // r?
-$Layout-prop-responsive-primary-region: "responsive-primary" !default;       // r-primary-region?
-$Layout-prop-responsive-pane-position:  "responsive-pane-position" !default; // r-pane-pos?
-$Layout-prop-responsive-at:             "responsive-at" !default;            // r-at?
-
-$Layout-prop-has-header:                "has-header" !default;
-$Layout-prop-has-footer:                "has-footer" !default;
-
-
-.#{$Layout} {
-  --Layout-pane-width: #{map-get($sidebar-width, 'sm')};
-  --Layout-content-width: 100%;
-
-  --Layout-template-columns: 1fr var(--Layout-pane-width);
-  --Layout-template-rows: 1fr;
-  --Layout-template-areas: "content pane";
-
-  --Layout-column-gap: #{$spacer-3};
-  --Layout-row-gap: #{$spacer-3};
-
-  --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
-
-  // Outer spacing
-
-  margin: var(--Layout-outer-spacing-y) var(--Layout-outer-spacing-x);
-
-  > .#{$Layout}-regions {
-    display: grid;
-    column-gap: var(--Layout-column-gap);
-    row-gap: var(--Layout-row-gap);
-    grid-template-columns: var(--Layout-template-columns);
-    grid-template-rows: var(--Layout-template-rows);
-    grid-template-areas: var(--Layout-template-areas);
-  }
-
-  &.#{$Layout}--#{$Layout-prop-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}--#{$Layout-prop-outer-spacing}-condensed {
-    --Layout-outer-spacing-x: #{$spacer-3}; // 16px
-    --Layout-outer-spacing-y: #{$spacer-3}; // 16px
-  }
-
-  // Inner spacing
-
-  &.#{$Layout}--#{$Layout-prop-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}--#{$Layout-prop-inner-spacing}-condensed {
-    --Layout-inner-spacing-min: #{$spacer-3}; // 16px
-    --Layout-inner-spacing-max: #{$spacer-3}; // 16px
-  }
-
-  // Column gap
-
-  &.#{$Layout}--#{$Layout-prop-column-gap}-normal {
-    --Layout-column-gap: #{$spacer-3}; // 16px
-
-    @include breakpoint(lg) {
-      --Layout-column-gap: #{$spacer-4}; // 24px
-    }
-  }
-
-  &.#{$Layout}--#{$Layout-prop-column-gap}-condensed {
-    --Layout-column-gap: #{$spacer-3}; // 16px
-  }
-
-  &.#{$Layout}--#{$Layout-prop-column-gap}-none {
-    // A `px` unit is needed in here to define it as a length type
-    // See https://stackoverflow.com/a/32518348
-    --Layout-column-gap: 0px;
-  }
-
-  // Row gap
-
-  &.#{$Layout}--#{$Layout-prop-row-gap}-normal {
-    --Layout-row-gap: #{$spacer-3}; // 16px
-
-    @include breakpoint(lg) {
-      --Layout-row-gap: #{$spacer-4}; // 24px
-    }
-  }
-
-  &.#{$Layout}--#{$Layout-prop-row-gap}-none {
-    // A `px` unit is needed in here to define it as a length type
-    // See https://stackoverflow.com/a/32518348
-    --Layout-row-gap: 0px;
-  }
-
-  &.#{$Layout}--#{$Layout-prop-row-gap}-condensed {
-    --Layout-row-gap: #{$spacer-3}; // 16px
-  }
-
-  // `flow-horizontal` determines whether `Layout` can render desktop-friendly
-  // two-column layouts. It should appear by default for compatibility
-  // with desktop browsers that have JavaScript disabled.
-
-  // Use `responsive-behaviorAt` to determine in which breakpoint `Layout` will
-  // stop flowing horizontally. In these cases `flow-horizontal` class will be
-  // removed.
-
-  // The reason this is not a media query is because it's still not possible to
-  // use CSS variables to determine the breakpoint dinamically. (And the other
-  // option would be to duplicate too much code.)
-
-  &.#{$Layout}--#{$Layout-prop-flow-horizontal} {
-
-    // Region position
-
-    &.#{$Layout}--#{$Layout-prop-pane-position}-start {
-      --Layout-template-columns: var(--Layout-pane-width) 1fr;
-      --Layout-template-areas: "pane content";
-
-      &.#{$Layout}--#{$Layout-prop-has-header} {
-        --Layout-template-areas: "header header" "pane content";
-      }
-
-      &.#{$Layout}--#{$Layout-prop-has-footer} {
-        --Layout-template-areas: "pane content" "footer footer";
-      }
-
-      &.#{$Layout}--#{$Layout-prop-has-header}.#{$Layout}--#{$Layout-prop-has-footer} {
-        --Layout-template-areas: "header header" "pane content" "footer footer";
-      }
-    }
-
-    &.#{$Layout}--#{$Layout-prop-pane-position}-end {
-      --Layout-template-columns: 1fr var(--Layout-pane-width);
-      --Layout-template-areas: "content pane";
-
-      &.#{$Layout}--#{$Layout-prop-has-header} {
-        --Layout-template-areas: "header header" "content pane";
-      }
-
-      &.#{$Layout}--#{$Layout-prop-has-footer} {
-        --Layout-template-areas: "content pane" "footer footer";
-      }
-
-      &.#{$Layout}--#{$Layout-prop-has-header}.#{$Layout}--#{$Layout-prop-has-footer} {
-        --Layout-template-areas: "header header" "content pane" "footer footer";
-      }
-    }
-
-    // Template rows heights
-
-    &.#{$Layout}--#{$Layout-prop-has-header} {
-      --Layout-template-rows: min-content 1fr;
-    }
-
-    &.#{$Layout}--#{$Layout-prop-has-footer} {
-      --Layout-template-rows: 1fr min-content;
-    }
-
-    &.#{$Layout}--#{$Layout-prop-has-header}.#{$Layout}--#{$Layout-prop-has-footer} {
-      --Layout-template-rows: min-content 1fr min-content;
-    }
-
-    // Pane divider
-
-    &.#{$Layout}--#{$Layout-prop-pane-divider} {
-      &.#{$Layout}--#{$Layout-prop-pane-position}-start {
-        .#{$Layout}-pane {
-          border-right: 1px solid $Layout-divider-color;
-        }
-
-        &:not(.#{$Layout}--#{$Layout-prop-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}--#{$Layout-prop-pane-position}-end {
-        .#{$Layout}-pane {
-          border-left: 1px solid $Layout-divider-color;
-        }
-
-        &:not(.#{$Layout}--#{$Layout-prop-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);
-          }
-        }
-      }
-    }
-
-    // Header divider
-
-    &.#{$Layout}--#{$Layout-prop-header-divider} {
-      .#{$Layout}-header {
-        border-bottom: 1px solid $Layout-divider-color;
-      }
-    }
-
-    // Footer divider
-
-    &.#{$Layout}--#{$Layout-prop-footer-divider} {
-      .#{$Layout}-footer {
-        border-top: 1px solid $Layout-divider-color;
-      }
-    }
-
-    // Content width
-
-    [class^="#{$Layout}-content-centered-"] {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap));
-
-      > [class^="container-"] {
-        margin-left: 0;
-      }
-    }
-
-    &.#{$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}-content-centered-sm {
-      --Layout-content-width: #{$container-sm};
-    }
-
-    .#{$Layout}-content-centered-md {
-      --Layout-content-width: #{$container-md};
-    }
-
-    .#{$Layout}-content-centered-lg {
-      --Layout-content-width: #{$container-lg};
-    }
-
-    .#{$Layout}-content-centered-xl {
-      --Layout-content-width: #{$container-xl};
-    }
-
-    // Sticky pane
-    // FIXME - this is currently broken if footer is present
-
-    &.#{$Layout}--#{$Layout-prop-pane-is-sticky} {
-      .#{$Layout}-pane {
-        position: sticky;
-        max-height: 100vh;
-        overflow: auto;
-      }
-    }
-
-  }
-
-  // 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 behavior
-
-  // -- Flow horizontal
-
-  &.#{$Layout}--#{$Layout-prop-responsive-behavior}-flowVertical:not(.#{$Layout}--#{$Layout-prop-flow-horizontal}) {
-
-    // Region position
-
-    > .#{$Layout}-regions {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-areas: var(--Layout-template-areas);
-    }
-
-    // responsive-pane-position: end (default)
-    
-    &:not(.#{$Layout}--#{$Layout-prop-responsive-pane-position}-start) {
-      --Layout-template-areas: "content" "pane";
-
-      &.#{$Layout}--#{$Layout-prop-has-header} {
-        --Layout-template-areas: "header" "content" "pane";
-      }
-  
-      &.#{$Layout}--#{$Layout-prop-has-footer} {
-        --Layout-template-areas: "content" "pane" "footer";
-      }
-  
-      &.#{$Layout}--#{$Layout-prop-has-header}.#{$Layout}--#{$Layout-prop-has-footer} {
-        --Layout-template-areas: "header" "content" "pane" "footer";
-      }
-    }
-
-    // responsive-pane-position: start
-
-    &.#{$Layout}--#{$Layout-prop-responsive-pane-position}-start {
-      --Layout-template-areas: "pane" "content";
-
-      &.#{$Layout}--#{$Layout-prop-has-header} {
-        --Layout-template-areas: "header" "pane" "content";
-      }
-  
-      &.#{$Layout}--#{$Layout-prop-has-footer} {
-        --Layout-template-areas: "pane" "content" "footer";
-      }
-  
-      &.#{$Layout}--#{$Layout-prop-has-header}.#{$Layout}--#{$Layout-prop-has-footer} {
-        --Layout-template-areas: "header" "pane" "content" "footer";
-      }
-    }
-  }
-
-  // -- Split as pages
-
-  &.#{$Layout}--#{$Layout-prop-responsive-behavior}-splitAsPages:not(.#{$Layout}--#{$Layout-prop-flow-horizontal}) {
-
-       // Region position
-
-       > .#{$Layout}-regions {
-        display: grid;
-        grid-template-columns: 1fr;
-        grid-template-areas: var(--Layout-template-areas);
-      }
-
-      &.#{$Layout}--#{$Layout-prop-responsive-primary-region}-content {
-
-        --Layout-template-areas: "content";
-
-        .#{$Layout}-pane {
-          display: none;
-        }
-
-        &.#{$Layout}--#{$Layout-prop-has-header} {
-          --Layout-template-areas: "header" "content";
-        }
-    
-        &.#{$Layout}--#{$Layout-prop-has-footer} {
-          --Layout-template-areas: "content" "footer";
-        }
-    
-        &.#{$Layout}--#{$Layout-prop-has-header}.#{$Layout}--#{$Layout-prop-has-footer} {
-          --Layout-template-areas: "header" "content" "footer";
-        }
-      }
-
-      &.#{$Layout}--#{$Layout-prop-responsive-primary-region}-pane {
-
-        --Layout-template-areas: "pane";
-
-        .#{$Layout}-content {
-          display: none;
-        }
-
-        &.#{$Layout}--#{$Layout-prop-has-header} {
-          --Layout-template-areas: "header" "pane";
-        }
-    
-        &.#{$Layout}--#{$Layout-prop-has-footer} {
-          --Layout-template-areas: "content" "pane";
-        }
-    
-        &.#{$Layout}--#{$Layout-prop-has-header}.#{$Layout}--#{$Layout-prop-has-footer} {
-          --Layout-template-areas: "header" "pane" "footer";
-        }
-      }
-  }
-
-  // Responsive divider
-
-  &.#{$Layout}:not(.#{$Layout}--#{$Layout-prop-flow-horizontal}) {
-    .#{$Layout}-region--line-divider {
-      position: relative;
-      padding-bottom: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
-      border-bottom: 1px solid transparent;
-
-      &:after {
-        content: "";
-        display: block;
-        position: absolute;
-        background-color: var(--color-canvas-inset);
-        background-color: red;
-        width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
-        height: 1px;
-        left: calc(var(--Layout-outer-spacing-x) * -1);
-        bottom: -1px;
-      }
-    }
-
-    .#{$Layout}-region--shallow-divider {
-      position: relative;
-      padding-bottom: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
-      margin-bottom: #{$spacer-2}; // 8px
-
-      &:after {
-        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;
-      }
-    }
-  }
-
-
-  // Regions
-
-  .#{$Layout}-header, .#{$Layout}-content, .#{$Layout}-pane, .#{$Layout}-footer {
-    padding: var(--Layout-inner-spacing-min);
-  }
-
-  .#{$Layout}-header {
-    grid-area: header;
-    background: lightpink;
-  }
-
-  .#{$Layout}-content {
-    padding-left: var(--Layout-inner-spacing-max);
-    padding-right: var(--Layout-inner-spacing-max);
-    grid-area: content;
-    background: rgb(255, 197, 253);
-  }
-
-  .#{$Layout}-pane {
-    grid-area: pane;
-    background: rgb(215, 255, 233);
-  }
-
-  .#{$Layout}-footer {
-    grid-area: footer;
-    background: lightyellow;
-  }
-
-}

package/marketing/support/mixins.scss

@@ -1,66 +0,0 @@
-@mixin btn-solid-mktg($color, $bg, $bg2, $bg3, $bg4) {
-  color: $color;
-  background-color: $bg2;
-  background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);
-
-  &::before {
-    background-image: linear-gradient(-180deg, $bg3 0%, $bg4 100%);
-  }
-
-  &:hover,
-  &.hover,
-  &:active,
-  &.selected,
-  &[aria-selected=true],
-  [open] > & {
-    background-color: $bg2;
-    background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);
-  }
-
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: 0 0 0 0.2em rgba($bg2, 0.4);
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled=true] {
-    pointer-events: none;
-    cursor: default;
-    opacity: 0.5;
-  }
-}
-
-@mixin btn-outline-mktg($color, $color2, $border, $borderHover, $borderFocus, $borderFocusInset) {
-  color: $color;
-  background: none;
-  box-shadow: 0 0 0 1px $border inset;
-
-  &::before {
-    display: none;
-  }
-
-  &:hover,
-  &.hover,
-  &:active,
-  &.selected,
-  &[aria-selected=true],
-  [open] > & {
-    color: $color2;
-    background: none;
-    box-shadow: 0 0 0 2px $borderHover inset;
-  }
-
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: 0 0 0 2px $borderFocus inset, 0 0 0 4px $borderFocusInset;
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled=true] {
-    opacity: 0.5;
-  }
-}