@primer/css 0.0.0-1ea75fe → 0.0.0-202110100305

package/layout/layout-beta.scss

@@ -0,0 +1,339 @@
+// Component className
+
+$Layout: "LayoutBeta";
+$Layout-divider-color: red; // var(--color-border-default)
+
+// Property modifier names
+
+// -- Wrapper
+$Layout-prop-wrapperSizing:      "wrapper-sizing";        // size?
+
+$Layout-prop-outerSpacing:       "outer-spacing";         // outer-m?
+$Layout-prop-innerSpacing:       "inner-spacing";         // inner-p?
+$Layout-prop-columnGap:          "column-gap";
+$Layout-prop-rowGap:             "row-gap";
+
+$Layout-prop-paneDivider:        "pane-divider";
+$Layout-prop-headerDivider:      "header-divider";
+$Layout-prop-footerDivider:      "footer-divider";
+
+$Layout-prop-panePosition:       "pane-position";         // pane-pos?
+$Layout-prop-paneWidth:          "pane-width";            // pane-w?
+$Layout-prop-contentWidth:       "content-width";         // content-w?
+
+$Layout-prop-flowHorizontal:     "flow-horizontal";       // flow-h?
+$Layout-prop-responsiveBehavior: "responsive-behavior";   // r?
+$Layout-prop-responsiveAt:       "responsive-at";         // r-at?
+
+$Layout-prop-hasHeader:          "has-header";
+$Layout-prop-hasFooter:          "has-footer";
+
+
+.#{$Layout} {
+  --Layout-pane-width: #{map-get($sidebar-width, 'sm')};
+  --Layout-template-columns: 1fr var(--Layout-pane-width);
+  --Layout-template-rows: min-content;
+  --Layout-template-areas: "content pane";
+
+  --Layout-column-gap: #{$spacer-3};
+  --Layout-row-gap: #{$spacer-3};
+
+  --Layout-outer-spacing-x: 0; // wrapper margin x
+  --Layout-outer-spacing-y: 0; // wrapper margin y
+
+  --Layout-inner-spacing-min: 0;
+  --Layout-inner-spacing-max: 0;
+
+  // spacing: none, 
+
+  // `flowHorizontal` 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 `responsiveBehaviorAt` to determine in which breakpoint `Layout` will
+  // stop flowing horizontally. In these cases `flowHorizontal` 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-flowHorizontal} {
+
+    margin: 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);
+    }
+
+    // panePosition
+
+    &.#{$Layout}--#{$Layout-prop-panePosition}-start {
+      --Layout-template-columns: var(--Layout-pane-width) 1fr;
+      --Layout-template-areas: "pane content";
+
+      &.#{$Layout}--#{$Layout-prop-hasHeader} {
+        --Layout-template-areas: "header header"
+                                 "pane content";
+      }
+
+      &.#{$Layout}--#{$Layout-prop-hasFooter} {
+        --Layout-template-areas: "pane content"
+                                 "footer footer";
+      }
+
+      &.#{$Layout}--#{$Layout-prop-hasHeader}.#{$Layout}--#{$Layout-prop-hasFooter} {
+        --Layout-template-areas: "header header"
+                                 "pane content"
+                                 "footer footer";
+      }
+    }
+
+    &.#{$Layout}--#{$Layout-prop-panePosition}-end {
+      --Layout-template-columns: 1fr var(--Layout-pane-width);
+      --Layout-template-areas: "content pane";
+
+      &.#{$Layout}--#{$Layout-prop-hasHeader} {
+        --Layout-template-areas: "header header"
+                                 "content pane";
+      }
+
+      &.#{$Layout}--#{$Layout-prop-hasFooter} {
+        --Layout-template-areas: "content pane"
+                                 "footer footer";
+      }
+
+      &.#{$Layout}--#{$Layout-prop-hasHeader}.#{$Layout}--#{$Layout-prop-hasFooter} {
+        --Layout-template-areas: "header header"
+                                 "content pane"
+                                 "footer footer";
+      }
+    }
+
+    // Template rows
+
+    &.#{$Layout}--#{$Layout-prop-hasHeader} {
+      --Layout-template-rows: min-content 1fr;
+    }
+
+    &.#{$Layout}--#{$Layout-prop-hasFooter} {
+      --Layout-template-rows: 1fr min-content;
+    }
+
+    &.#{$Layout}--#{$Layout-prop-hasHeader}.#{$Layout}--#{$Layout-prop-hasFooter} {
+      --Layout-template-rows: min-content 1fr min-content;
+    }
+
+    // Outer spacing
+
+    &.#{$Layout}--#{$Layout-prop-outerSpacing}-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-outerSpacing}-condensed {
+      --Layout-outer-spacing-x: #{$spacer-3}; // 16px
+      --Layout-outer-spacing-y: #{$spacer-3}; // 16px
+    }
+
+    // Inner spacing
+
+    &.#{$Layout}--#{$Layout-prop-innerSpacing}-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-innerSpacing}-condensed {
+      --Layout-inner-spacing-min: #{$spacer-3}; // 16px
+      --Layout-inner-spacing-max: #{$spacer-3}; // 16px
+    }
+
+    // Pane divider
+
+    &.#{$Layout}--#{$Layout-prop-paneDivider} {
+      &.#{$Layout}--#{$Layout-prop-panePosition}-start {
+        .#{$Layout}-pane {
+          border-right: 1px solid $Layout-divider-color;
+        }
+
+        &:not(.#{$Layout}--#{$Layout-prop-columnGap}-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-panePosition}-end {
+        .#{$Layout}-pane {
+          border-left: 1px solid $Layout-divider-color;
+        }
+
+        &:not(.#{$Layout}--#{$Layout-prop-columnGap}-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-headerDivider} {
+      .#{$Layout}-header {
+        border-bottom: 1px solid $Layout-divider-color;
+      }
+    }
+
+    // Footer divider
+
+    &.#{$Layout}--#{$Layout-prop-footerDivider} {
+      .#{$Layout}-footer {
+        border-top: 1px solid $Layout-divider-color;
+      }
+    }
+
+    // Column gap
+
+    &.#{$Layout}--#{$Layout-prop-columnGap}-normal {
+      --Layout-column-gap: #{$spacer-3}; // 16px
+
+      @include breakpoint(lg) {
+        --Layout-column-gap: #{$spacer-4}; // 24px
+      }
+    }
+
+    &.#{$Layout}--#{$Layout-prop-columnGap}-condensed {
+      --Layout-column-gap: #{$spacer-3}; // 16px
+    }
+
+    &.#{$Layout}--#{$Layout-prop-columnGap}-none {
+      --Layout-column-gap: 0;
+    }
+
+    // Row gap
+
+    &.#{$Layout}--#{$Layout-prop-rowGap}-normal {
+      --Layout-row-gap: #{$spacer-3}; // 16px
+
+      @include breakpoint(lg) {
+        --Layout-row-gap: #{$spacer-4}; // 24px
+      }
+    }
+
+    &.#{$Layout}--#{$Layout-prop-rowGap}-none {
+      --Layout-row-gap: 0;
+    }
+
+    &.#{$Layout}--#{$Layout-prop-rowGap}-condensed {
+      --Layout-row-gap: #{$spacer-3}; // 16px
+    }
+  }
+
+  // paneWidth
+
+  @each $breakpoint in map-keys($sidebar-width) {
+    @include breakpoint($breakpoint) {
+      --Layout-pane-width: #{map-get($sidebar-width, $breakpoint)};
+    }
+  }
+
+  &.#{$Layout}--#{$Layout-prop-paneWidth}-narrow {
+    @each $breakpoint in map-keys($sidebar-narrow-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-pane-width: #{map-get($sidebar-narrow-width, $breakpoint)};
+      }
+    }
+  }
+
+  &.#{$Layout}--#{$Layout-prop-paneWidth}-wide {
+    @each $breakpoint in map-keys($sidebar-wide-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-pane-width: #{map-get($sidebar-wide-width, $breakpoint)};
+      }
+    }
+  }
+
+  // responsiveBehavior
+
+  &.#{$Layout}--#{$Layout-prop-responsiveBehavior}-flowVertical:not(.#{$Layout}--#{$Layout-prop-flowHorizontal}) {
+    > .#{$Layout}-regions {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-areas: var(--Layout-template-areas);
+    }
+  }
+
+  /*
+  &.#{$Layout}--#{$Layout-prop-responsiveBehavior}-flowVertical:not(.#{$Layout}--#{$Layout-prop-flowHorizontal}) {
+    // flow vertically on mobile
+
+    > .#{$Layout}-regions {
+      row-gap: var(--Layout-row-gap);
+    }
+
+    .#{$Layout}-header, .#{$Layout}-content, .#{$Layout}-pane, .#{$Layout}-footer {
+      margin-bottom: var(--Layout-row-gap);
+    }
+  }
+
+  &.#{$Layout}--#{$Layout-prop-responsiveBehavior}-splitAsPages:not(.#{$Layout}--#{$Layout-prop-flowHorizontal}) {
+    // split as pages on mobile
+    //background: yellow;
+  }
+  */
+
+  // 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;
+  }
+
+}
+
+// contentWidth
+// FIXME
+// content-centered

package/layout/layout.scss

@@ -0,0 +1,185 @@
+// Layout component
+
+.Layout {
+  display: grid;
+  --Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
+  --Layout-gutter: 16px;
+
+  @media (max-width: calc(#{$width-sm} - 1px)) {
+    @include flow-as-row;
+  }
+
+  &.Layout--flowRow-until-md {
+    @media (max-width: calc(#{$width-md} - 1px)) {
+      @include flow-as-row;
+    }
+  }
+
+  &.Layout--flowRow-until-lg {
+    @media (max-width: calc(#{$width-lg} - 1px)) {
+      @include flow-as-row;
+    }
+  }
+
+  // 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-gap: var(--Layout-gutter);
+
+  .Layout-sidebar {
+    grid-column: 1;
+  }
+
+  .Layout-divider {
+    display: none;
+  }
+
+  .Layout-main {
+    grid-column: 2 / span 2;
+  }
+
+  // Gutter spacing
+
+  @include breakpoint(lg) {
+    --Layout-gutter: 24px;
+  }
+
+  &.Layout--gutter-none {
+    --Layout-gutter: 0;
+  }
+
+  &.Layout--gutter-condensed {
+    --Layout-gutter: 16px;
+  }
+
+  &.Layout--gutter-spacious {
+    @include breakpoint(lg) {
+      --Layout-gutter: 32px;
+    }
+
+    @include breakpoint(xl) {
+      --Layout-gutter: 40px;
+    }
+  }
+
+  // Sidebar width
+
+  @each $breakpoint in map-keys($sidebar-width) {
+    @include breakpoint($breakpoint) {
+      --Layout-sidebar-width: #{map-get($sidebar-width, $breakpoint)};
+    }
+  }
+
+  &.Layout--sidebar-narrow {
+    @each $breakpoint in map-keys($sidebar-narrow-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-sidebar-width: #{map-get($sidebar-narrow-width, $breakpoint)};
+      }
+    }
+  }
+
+  &.Layout--sidebar-wide {
+    @each $breakpoint in map-keys($sidebar-wide-width) {
+      @include breakpoint($breakpoint) {
+        --Layout-sidebar-width: #{map-get($sidebar-wide-width, $breakpoint)};
+      }
+    }
+  }
+
+  // Sidebar position
+
+  &.Layout--sidebarPosition-start {
+    .Layout-sidebar {
+      grid-column: 1;
+    }
+
+    .Layout-main {
+      grid-column: 2 / span 2;
+    }
+  }
+
+  &.Layout--sidebarPosition-end {
+    grid-template-columns: 1fr 0 auto;
+
+    .Layout-main {
+      grid-column: 1;
+    }
+
+    .Layout-sidebar {
+      grid-column: 2 / span 2;
+    }
+  }
+
+  // Sidebar divider
+
+  &.Layout--divided {
+    .Layout-divider {
+      display: block;
+      grid-column: 2;
+      width: 1px;
+      // stylelint-disable-next-line primer/spacing
+      margin-right: -1px;
+      background: var(--color-border-default);
+    }
+
+    .Layout-main {
+      grid-column: 3 / span 1;
+    }
+
+    &.Layout--sidebarPosition-end {
+      .Layout-sidebar {
+        grid-column: 3 / span 1;
+      }
+
+      .Layout-main {
+        grid-column: 1;
+      }
+    }
+  }
+}
+
+.Layout-divider {
+  display: none;
+  width: 1px;
+}
+
+.Layout-sidebar {
+  // stylelint-disable-next-line primer/no-undefined-vars
+  width: var(--Layout-sidebar-width);
+}
+
+.Layout-main {
+  min-width: 0;
+
+  // Centered main column
+  // FIXME: right-aligned sidebar
+  .Layout-main-centered-md,
+  .Layout-main-centered-lg,
+  .Layout-main-centered-xl {
+    margin-right: auto;
+    margin-left: auto;
+
+    > .container-md,
+    > .container-lg,
+    > .container-xl {
+      margin-left: 0;
+    }
+  }
+
+  .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

@@ -0,0 +1,79 @@
+// Layout mixins
+
+@mixin flow-as-row {
+  grid-auto-flow: row;
+  grid-template-columns: 1fr !important;
+
+  .Layout-sidebar,
+  .Layout-divider,
+  .Layout-main {
+      width: 100% !important;
+      grid-column: 1 !important;
+    }
+
+  &.Layout--sidebarPosition-flowRow-start {
+    .Layout-sidebar {
+      grid-row: 1;
+    }
+
+    .Layout-main {
+      grid-row: 2 / span 2;
+    }
+  }
+
+  &.Layout--sidebarPosition-flowRow-end {
+    .Layout-sidebar {
+      grid-row: 2 / span 2;
+    }
+
+    .Layout-main {
+      grid-row: 1;
+    }
+  }
+
+  &.Layout--sidebarPosition-flowRow-none {
+    .Layout-sidebar {
+      display: none;
+    }
+  }
+
+  &.Layout--divided {
+    @include flow-as-row-divider;
+
+    .Layout-main {
+      grid-row: 3 / span 1;
+    }
+
+    &.Layout--sidebarPosition-flowRow-end {
+      .Layout-sidebar {
+        grid-row: 3 / span 1;
+      }
+
+      .Layout-main {
+        grid-row: 1;
+      }
+    }
+  }
+}
+
+@mixin flow-as-row-divider {
+  --Layout-gutter: 0;
+
+  .Layout-divider {
+    height: 1px;
+    grid-row: 2;
+
+    &.Layout-divider--flowRow-hidden {
+      display: none;
+    }
+
+    &.Layout-divider--flowRow-shallow {
+      height: 8px;
+      margin-right: 0;
+      background: var(--color-canvas-inset);
+      border-color: var(--color-border-default);
+      border-style: solid;
+      border-width: $border-width 0;
+    }
+  }
+}

package/links/README.md

@@ -0,0 +1,25 @@
+---
+bundle: "links"
+generated: true
+---
+
+# Primer CSS: `links` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/links/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/links.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/links/index.scss

@@ -0,0 +1,3 @@
+// support files
+@import '../support/index.scss';
+@import './link.scss';

package/links/link.scss

@@ -0,0 +1,55 @@
+// Links
+
+.Link {
+  color: var(--color-accent-fg);
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+.Link--primary {
+  color: var(--color-fg-default) !important;
+
+  &:hover {
+    color: var(--color-accent-fg) !important;
+  }
+}
+
+.Link--secondary {
+  color: var(--color-fg-muted) !important;
+
+  &:hover {
+    color: var(--color-accent-fg) !important;
+  }
+}
+
+.Link--muted {
+  color: var(--color-fg-muted) !important;
+
+  &:hover {
+    color: var(--color-accent-fg) !important;
+    text-decoration: none;
+  }
+}
+
+// Set the link color only on hover
+// Useful when you want only part of a link to turn blue on hover
+.Link--onHover {
+  &:hover {
+    color: var(--color-accent-fg) !important;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+// When using a color utility class inside of a link class,
+// color should change with link on hover.
+.Link--secondary,
+.Link--primary,
+.Link--muted {
+  &:hover [class*='color-text'] {
+    color: inherit !important;
+  }
+}

package/loaders/README.md

@@ -0,0 +1,25 @@
+---
+bundle: "loaders"
+generated: true
+---
+
+# Primer CSS: `loaders` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/loaders/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/loaders.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/loaders/index.scss

@@ -0,0 +1,2 @@
+@import '../support/index.scss';
+@import './loaders.scss';