@primer/css 20.8.0-rc.633d9477 → 20.8.0-rc.6d7cf325

package/layout/layout.scss

@@ -1,182 +1 @@
-// Layout component
-
-.Layout {
-  display: grid;
-
-  --Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
-  --Layout-gutter: 16px;
-
-  @media (max-width: calc(#{$width-sm} - 0.02px)) {
-    @include flow-as-row;
-  }
-
-  &.Layout--flowRow-until-md {
-    @media (max-width: calc(#{$width-md} - 0.02px)) {
-      @include flow-as-row;
-    }
-  }
-
-  &.Layout--flowRow-until-lg {
-    @media (max-width: calc(#{$width-lg} - 0.02px)) {
-      @include flow-as-row;
-    }
-  }
-
-  // Flow as column
-
-  grid-auto-flow: column;
-  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); // sidebar column, separator, main column
-  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 {
-    // stylelint-disable-next-line length-zero-no-unit
-    --Layout-gutter: 0px;
-  }
-
-  &.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: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 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 {
-  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 {
-    max-width: calc(#{$container-md} + var(--Layout-sidebar-width) + var(--Layout-gutter));
-  }
-
-  .Layout-main-centered-lg {
-    max-width: calc(#{$container-lg} + var(--Layout-sidebar-width) + var(--Layout-gutter));
-  }
-
-  .Layout-main-centered-xl {
-    max-width: calc(#{$container-xl} + var(--Layout-sidebar-width) + var(--Layout-gutter));
-  }
-}
+@import '@primer/view-components/app/components/primer/alpha/layout';

package/layout/page-layout.scss

@@ -22,6 +22,32 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
   // stylelint-enable length-zero-no-unit
 }
 
+// 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;
+}
+
 .PageLayout {
   display: block;
   // stylelint-disable-next-line primer/spacing

package/navigation/menu.scss

@@ -1 +1 @@
-@import '@primer/view-components/app/components/primer/menu_component';
+@import '@primer/view-components/app/components/primer/alpha/menu';

package/overlay/overlay.scss

@@ -1,485 +1 @@
-// stylelint-disable selector-max-compound-selectors, max-nesting-depth, selector-max-specificity, primer/borders
-// replace with primitive
-$primer-borderRadius-large: 0.75rem;
-
-.Overlay--hidden {
-  display: none !important;
-}
-
-.Overlay--visibilityHidden {
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-  opacity: 0;
-}
-
-.Overlay {
-  display: flex;
-  width: min(var(--overlay-width), 100vw - 2rem);
-  min-width: 192px;
-  max-height: min(calc(100vh - 2rem), var(--overlay-height));
-  white-space: normal;
-  flex-direction: column;
-  background-color: var(--color-canvas-overlay);
-  border-radius: $primer-borderRadius-large;
-  box-shadow: var(--color-overlay-shadow);
-  opacity: 1;
-
-  &.Overlay--size-auto {
-    min-width: 192px;
-    max-width: calc(100vw - 2rem);
-    max-height: calc(100vh - 2rem);
-  }
-
-  &.Overlay--size-full {
-    width: 100vw;
-    height: 100vh;
-  }
-
-  &.Overlay--size-xsmall {
-    --overlay-width: 192px;
-
-    max-height: calc(100vh - 2rem);
-  }
-
-  &.Overlay--size-small {
-    --overlay-height: 256px;
-    --overlay-width: 320px;
-  }
-
-  &.Overlay--size-small-portrait {
-    --overlay-height: 432px;
-    --overlay-width: 320px;
-  }
-
-  &.Overlay--size-medium {
-    --overlay-height: 320px;
-    --overlay-width: 480px;
-  }
-
-  &.Overlay--size-medium-portrait {
-    --overlay-height: 600px;
-    --overlay-width: 480px;
-  }
-
-  &.Overlay--size-large {
-    --overlay-height: 432px;
-    --overlay-width: 640px;
-  }
-
-  &.Overlay--size-xlarge {
-    --overlay-height: 600px;
-    --overlay-width: 960px;
-  }
-
-  &.Overlay--height-auto {
-    height: auto;
-  }
-
-  // start deprecate in favor of Alpha::Dialog
-  &.Overlay--height-xsmall {
-    height: min(192px, 100vh - 2rem);
-  }
-
-  &.Overlay--height-small {
-    height: min(256px, 100vh - 2rem);
-  }
-
-  &.Overlay--height-medium {
-    height: min(320px, 100vh - 2rem);
-  }
-
-  &.Overlay--height-large {
-    height: min(432px, 100vh - 2rem);
-  }
-
-  &.Overlay--height-xlarge {
-    height: min(600px, 100vh - 2rem);
-  }
-
-  &.Overlay--width-auto {
-    width: auto;
-  }
-
-  &.Overlay--width-small {
-    width: min(256px, 100vw - 2rem);
-  }
-
-  &.Overlay--width-medium {
-    width: min(320px, 100vw - 2rem);
-  }
-
-  &.Overlay--width-large {
-    // stylelint-disable-next-line primer/responsive-widths
-    width: min(480px, 100vw - 2rem);
-  }
-
-  &.Overlay--width-xlarge {
-    // stylelint-disable-next-line primer/responsive-widths
-    width: min(640px, 100vw - 2rem);
-  }
-
-  &.Overlay--width-xxlarge {
-    // stylelint-disable-next-line primer/responsive-widths
-    width: min(960px, 100vw - 2rem);
-  }
-
-  // end deprecate
-
-  &.Overlay--motion-scaleFade {
-    @media screen and (prefers-reduced-motion: no-preference) {
-      animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;
-    }
-  }
-
-  @keyframes Overlay--motion-scaleFade {
-    0% {
-      opacity: 0;
-      transform: scale(0.5);
-    }
-
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-}
-
-// for <form> element that wraps entire contents of overlay
-.Overlay-form {
-  display: flex;
-  overflow: auto;
-  flex-direction: column;
-  flex-grow: 1;
-}
-
-.Overlay-header {
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-
-  &.Overlay-header--divided {
-    padding-bottom: $spacer-2;
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: inset 0 #{-$border-width} var(--color-border-default);
-
-    + .Overlay-body {
-      padding-top: $spacer-3;
-    }
-  }
-
-  &.Overlay-header--large {
-    .Overlay-headerContentWrap {
-      .Overlay-titleWrap {
-        gap: $spacer-2;
-
-        .Overlay-title {
-          font-size: $h3-size;
-        }
-
-        .Overlay-description {
-          font-size: $body-font-size;
-        }
-      }
-    }
-  }
-
-  .Overlay-headerContentWrap {
-    display: flex;
-    align-items: flex-start;
-    gap: $spacer-2;
-    padding: $spacer-2 $spacer-2 0 $spacer-2;
-
-    .Overlay-actionWrap {
-      display: flex;
-      flex-direction: row;
-      gap: $spacer-2;
-    }
-
-    .Overlay-titleWrap {
-      display: flex;
-      padding: ($spacer-2 * 0.75) 0 ($spacer-2 * 0.75) $spacer-2;
-      flex-direction: column;
-      flex-grow: 1;
-      gap: $spacer-1;
-
-      .Overlay-title {
-        margin: 0;
-        font-size: $body-font-size;
-        font-weight: $font-weight-bold;
-      }
-
-      .Overlay-description {
-        margin: 0;
-        font-size: $font-size-small;
-        font-weight: $font-weight-normal;
-        color: var(--color-fg-muted);
-      }
-    }
-  }
-}
-
-// generic body content slot
-.Overlay-body {
-  padding: $spacer-3;
-  padding-top: 0;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  font-size: $body-font-size;
-  flex-grow: 1;
-
-  &.Overlay-body--paddingCondensed {
-    padding: $spacer-2;
-    padding-top: 0;
-  }
-
-  &.Overlay-body--paddingNone {
-    padding: 0;
-  }
-}
-
-// generic footer slot
-.Overlay-footer {
-  z-index: 1;
-  display: flex;
-  padding: 0 $spacer-3 $spacer-3 $spacer-3;
-  flex-direction: row;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-
-  &.Overlay-footer--divided {
-    padding-top: $spacer-3;
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: inset 0 $border-width var(--color-border-default);
-  }
-
-  &.Overlay-footer--alignStart {
-    justify-content: flex-start;
-    gap: $spacer-2;
-  }
-
-  &.Overlay-footer--alignCenter {
-    justify-content: center;
-    gap: $spacer-2;
-  }
-
-  &.Overlay-footer--alignEnd {
-    justify-content: flex-end;
-    gap: $spacer-2;
-  }
-}
-
-// TODO: replace with refactored IconButton
-.Overlay-closeButton {
-  position: relative;
-  display: grid;
-  width: $spacer-5;
-  height: $spacer-5;
-  padding: 0;
-  color: var(--color-fg-muted);
-  cursor: pointer;
-  user-select: none;
-  background-color: transparent;
-  border: $border-width $border-style transparent;
-  border-radius: $border-radius;
-  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-  transition-property: color, background-color, border-color;
-  place-content: center;
-  align-self: flex-start;
-  flex-shrink: 0;
-
-  &:hover,
-  &:focus {
-    background-color: var(--color-btn-hover-bg);
-    border: $border-width $border-style var(--color-btn-hover-bg);
-  }
-}
-
-@mixin Overlay-backdrop() {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 999;
-  display: flex;
-  background-color: var(--color-neutral-muted);
-}
-
-@mixin Overlay-backdrop--transparent() {
-  position: absolute;
-  z-index: 999;
-  background-color: transparent;
-}
-
-// variants must be mixins so we can extend within a media query (@extend is not supported inside media queries)
-
-// border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist
-
-// center
-@mixin Overlay-backdrop--center {
-  @include Overlay-backdrop;
-
-  align-items: center;
-  justify-content: center;
-}
-
-// anchor
-@mixin Overlay-backdrop--anchor {
-  @include Overlay-backdrop--transparent;
-
-  .Overlay {
-    width: auto;
-  }
-}
-
-// anchor side(s)
-@mixin Overlay-backdrop--side($responsiveVariant: '') {
-  @include Overlay-backdrop;
-
-  // default left
-  align-items: center;
-  justify-content: left;
-
-  &.Overlay-backdrop--placement-left#{$responsiveVariant} {
-    align-items: center;
-    justify-content: left;
-
-    > .Overlay#{$responsiveVariant} {
-      height: 100vh;
-      max-height: unset;
-      border-radius: $primer-borderRadius-large;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-
-      @media screen and (prefers-reduced-motion: no-preference) {
-        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;
-      }
-    }
-  }
-
-  &.Overlay-backdrop--placement-right#{$responsiveVariant} {
-    align-items: center;
-    justify-content: right;
-
-    > .Overlay#{$responsiveVariant} {
-      height: 100vh;
-      max-height: unset;
-      border-radius: $primer-borderRadius-large;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-
-      @media screen and (prefers-reduced-motion: no-preference) {
-        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;
-      }
-    }
-  }
-
-  &.Overlay-backdrop--placement-bottom#{$responsiveVariant} {
-    align-items: end;
-    justify-content: center;
-
-    > .Overlay#{$responsiveVariant} {
-      width: 100vw;
-      height: auto;
-      max-height: calc(100vh - 2rem);
-      border-radius: $primer-borderRadius-large;
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
-
-      @media screen and (prefers-reduced-motion: no-preference) {
-        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;
-      }
-    }
-  }
-
-  &.Overlay-backdrop--placement-top#{$responsiveVariant} {
-    align-items: start;
-    justify-content: center;
-
-    > .Overlay#{$responsiveVariant} {
-      border-radius: $primer-borderRadius-large;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-
-      @media screen and (prefers-reduced-motion: no-preference) {
-        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;
-      }
-    }
-  }
-}
-
-// full width
-@mixin Overlay-backdrop--full {
-  @include Overlay-backdrop;
-
-  .Overlay {
-    width: 100%;
-    max-width: 100vw;
-    height: 100%;
-    max-height: 100vh;
-    border-radius: unset !important;
-    flex-grow: 1;
-  }
-}
-
-// Overlay variant classnames
-.Overlay-backdrop--center {
-  @include Overlay-backdrop--center;
-}
-
-.Overlay-backdrop--anchor {
-  @include Overlay-backdrop--anchor;
-}
-
-.Overlay-backdrop--side {
-  @include Overlay-backdrop--side;
-}
-
-.Overlay-backdrop--full {
-  @include Overlay-backdrop--full;
-}
-
-// responsive variants
-// up to 767px
-@media (max-width: #{map-get($breakpoints, 'md') - 0.02px}) {
-  .Overlay-backdrop--center-whenNarrow {
-    @include Overlay-backdrop--center;
-  }
-
-  .Overlay-backdrop--anchor-whenNarrow {
-    @include Overlay-backdrop--anchor;
-  }
-
-  .Overlay-backdrop--side-whenNarrow {
-    @include Overlay-backdrop--side('-whenNarrow');
-  }
-
-  .Overlay-backdrop--full-whenNarrow {
-    @include Overlay-backdrop--full;
-  }
-}
-
-@keyframes Overlay--motion-slideDown {
-  from {
-    transform: translateY(-100%);
-  }
-}
-
-@keyframes Overlay--motion-slideUp {
-  from {
-    transform: translateY(100%);
-  }
-}
-
-@keyframes Overlay--motion-slideInRight {
-  from {
-    transform: translateX(-100%);
-  }
-}
-
-@keyframes Overlay--motion-slideInLeft {
-  from {
-    transform: translateX(100%);
-  }
-}
+@import '@primer/view-components/app/components/primer/alpha/dialog';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "20.8.0-rc.633d9477",
+  "version": "20.8.0-rc.6d7cf325",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@primer/primitives": "^7.9.0",
-    "@primer/view-components": "^0.0.112"
+    "@primer/view-components": "^0.0.115"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.6",