@primer/css 0.0.0-2021102434953 → 0.0.0-20211029165521

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 './layout-beta.scss';

package/layout/layout-beta.scss

@@ -0,0 +1,444 @@
+// Component className
+
+$Layout: 'LayoutBeta' !default;
+$Layout-divider-color: red !default; // var(--color-border-default)
+
+// Variant names
+
+$Layout-variant-stackRegions: 'stackRegions' !default;
+$Layout-variant-separateRegions: 'separateRegions' !default;
+$Layout-variant-multiColumn: 'multiColumns' !default;
+
+// Property modifier names
+
+// Wrapper & spacing
+$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;
+
+// Pane
+$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?
+
+// Content
+$Layout-prop-content-width:             'content-width' !default;            // content-w?
+
+// Variants & responsive variants
+
+$Layout-prop-flow-horizontal:           'multiColumns' !default;          // flow-h?
+$Layout-prop-responsive-behavior:       'variant' !default;               // r?
+
+// stackRegions-specific variants
+$Layout-prop-stackRegions-pane-position:  'stackRegions-pane-position' !default; // r-pane-pos?
+
+// separateRegions-specific variants
+$Layout-prop-separateRegions-primary-region: 'primary' !default;       // r-primary-region?
+
+// Default Layout values
+
+: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};
+
+  // A `px` unit is needed here to define it as a length type when used
+  // with a `calc()` function. 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}-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: 1fr;
+      grid-template-areas: var(--Layout-template-areas);
+    }
+  }
+
+  // Outer spacing
+
+  &.#{$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 here to define it as a length type when used
+    // with a `calc()` function. See https://stackoverflow.com/a/32518348
+    //
+    // stylelint-disable-next-line length-zero-no-unit
+    --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 here to define it as a length type when used
+    // with a `calc()` function. See https://stackoverflow.com/a/32518348
+    //
+    // stylelint-disable length-zero-no-unit
+    --Layout-row-gap: 0px;
+  }
+
+  &.#{$Layout}--#{$Layout-prop-row-gap}-condensed {
+    --Layout-row-gap: #{$spacer-3}; // 16px
+  }
+
+
+  // Layout variants
+
+  // -- Desktop-level multi-columns
+
+  // Layout--variant-stackRegions
+  // Layout--variant-separateRegions
+
+  // Layout--variant-md-multiColumns
+  // Layout--variant-lg-multiColumns
+
+  // -- Stack regions
+
+  &.#{$Layout}--#{$Layout-prop-responsive-behavior}-stackRegions {
+
+    &.#{$Layout}--variant-md-multiColumns {
+      @include Layout-stackRegions(md);
+    }
+
+    &.#{$Layout}--variant-lg-multiColumns {
+      @include Layout-stackRegions(lg);
+    }
+  }
+
+  // -- Separate regions variant
+
+  &.#{$Layout}--#{$Layout-prop-responsive-behavior}-separateRegions {
+
+    &.#{$Layout}--variant-md-multiColumns {
+      @include Layout-separateRegions(md);
+    }
+
+    &.#{$Layout}--variant-lg-multiColumns {
+      @include Layout-separateRegions(lg);
+    }
+  }
+
+  // multiColumn
+
+  // `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.)
+  
+
+  // FIXME - do we want to call this flowHorizontal??
+  // at least call it `flow-md-horizontal` or something
+
+  &.#{$Layout}--variant-md-multiColumns {
+    @include breakpoint(md) {
+      @include Layout-multiColumn;
+    }
+  }
+  
+  &.#{$Layout}--variant-lg-multiColumns {
+    @include breakpoint(lg) {
+      @include Layout-multiColumn;
+    }
+  }
+
+  //&.#{$Layout}--#{$Layout-prop-flow-horizontal} {
+
+    /*
+    &.#{$Layout}--#{$Layout-prop-pane-position}-start {
+      --Layout-template-columns: var(--Layout-pane-width) 1fr;
+      --Layout-template-areas: "pane content";
+    }
+
+    &.#{$Layout}--#{$Layout-prop-pane-position}-end {
+      --Layout-template-columns: 1fr var(--Layout-pane-width);
+      --Layout-template-areas: "content pane";
+    }
+    */
+
+    // Pane divider
+    // FIXME
+
+    /*
+    FIXME - Use Layout-divider
+    // 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-"] {
+    max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap));
+    margin-right: auto;
+    margin-left: auto;
+
+    > [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));
+    }
+  }
+
+  @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 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 {
+    // 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;
+  }
+
+}
+
+// Layout dividers
+
+// an <hr> horizontal line to be loosely used anywhere. Accompanied by
+// ` divider-md-none` or ` divider-lg-none`, or `divider-divider-md-line` or
+// `divider-divider-lg-line` for the filled line to be rendered as a thin line
+// on larger viewports.
+
+
+.#{$Layout}-divider-line {
+
+}
+.#{$Layout}-divider-filled {
+
+}
+
+.#{$Layout}--divider-line-before { 
+  border-top: 10px solid purple;
+}
+.#{$Layout}--divider-line-after {
+  border-bottom: 10px solid orange;
+}
+
+.#{$Layout}--divider-filled-before {
+  border-top: 20px solid purple;
+}
+.#{$Layout}--divider-filled-after {
+  border-bottom: 20px solid orange;
+}
+
+.#{$Layout}--variant-md-multiColumns {
+  @include breakpoint(md) {
+    .#{$Layout}-region--line-divider {
+      &:after {
+        display: none;
+      }
+    }
+  }
+}
+
+// FIXME -- this doesn't need to be CSS utilities. can use same approach with mixins I've used for responsive behaviors
+
+.#{$Layout}--divider-md-none {
+  @include breakpoint(md) {
+    border-top: 0;
+    border-bottom: 0;
+  }
+}
+
+.#{$Layout}--divider-lg-none {
+  @include breakpoint(lg) {
+    border-top: 0;
+    border-bottom: 0;
+  }
+}
+
+.#{$Layout}-divider-md-line-before { }
+.#{$Layout}-divider-md-line-after { }

package/layout/mixins.scss

@@ -1,4 +1,4 @@
-// Layout mixins
+// Layout alpha mixins
 
 @mixin flow-as-row {
   grid-auto-flow: row;
@@ -77,3 +77,99 @@
     }
   }
 }
+
+// Layout beta mixins
+
+@mixin Layout-multiColumn {
+  &.#{$Layout}--#{$Layout-prop-pane-position}-start {
+    --Layout-template-columns: var(--Layout-pane-width) 1fr;
+    --Layout-template-areas: "pane content";
+  }
+
+  &.#{$Layout}--#{$Layout-prop-pane-position}-end {
+    --Layout-template-columns: 1fr var(--Layout-pane-width);
+    --Layout-template-areas: "content pane";
+  }
+
+  // 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);
+        }
+      }
+    }
+  }
+
+  // Sticky pane
+
+  &.#{$Layout}--#{$Layout-prop-pane-is-sticky} {
+    .#{$Layout}-pane {
+      position: sticky;
+      top: 0;
+      max-height: 100vh;
+      overflow: auto;
+    }
+  }
+}
+
+@mixin Layout-stackRegions($max-breakpoint) {
+  @media (max-width: calc(#{map-get($breakpoints, $max-breakpoint)} - 0.02px)) {
+    --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';
+    }
+  }
+}
+
+@mixin Layout-separateRegions($max-breakpoint) {
+  @media (max-width: calc(#{map-get($breakpoints, $max-breakpoint)} - 0.02px)) {
+    --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;
+      }
+    }
+  }
+}