@primer/css 0.0.0-20220620061649 → 0.0.0-20220621152621

package/overlay/overlay.scss

@@ -1,50 +1,7 @@
 // stylelint-disable selector-max-compound-selectors, max-nesting-depth, selector-max-specificity, primer/borders
-// replace with primitives
+// replace with primitive
 $primer-borderRadius-large: 0.75rem;
 
-// https://github.com/github/primer/issues/1026
-$primer-duration-slow: 250ms;
-$primer-easing-out: cubic-bezier(0.33, 1, 0.68, 1);
-
-$Overlay-width: (
-  xsmall: 192px,
-  small: 256px,
-  medium: 320px,
-  large: 480px,
-  xlarge: 640px,
-  xxlarge: 960px
-) !default;
-
-$Overlay-height: (
-  xsmall: 192px,
-  small: 256px,
-  medium: 320px,
-  large: 432px,
-  xlarge: 600px
-) !default;
-
-// Overlay structure
-// =================
-//
-// .Overlay-backdrop
-// ├─ .Overlay
-// │  ├─ .Overlay-header
-// │  │  ├─ .Overlay-headerContentWrap
-// │  │  │  ├─ .Overlay-titleWrap
-// │  │  │  │  ├─ .Overlay-title
-// │  │  │  │  ├─ .Overlay-description
-// │  │  ├─ .Overlay-actionWrap
-// │  │  │  ├─ .Overlay-closeButton
-// │  ├─ .Overlay-body
-// │  ├─ .Overlay-footer
-//
-// Todo:
-// - Overlay-form?
-// - Deprecate Overlay-closeButton in favor of redesigned iconButton
-
-// Visibility
-// Todo: these are applied to `Overlay-backdrop`, not to `Overlay`
-
 .Overlay--hidden {
   display: none !important;
 }
@@ -57,92 +14,82 @@ $Overlay-height: (
 }
 
 .Overlay {
-  position: relative;
   display: flex;
-  min-width: #{map-get($Overlay-width, 'xsmall')};
+  min-width: 192px;
   flex-direction: column;
   background-color: var(--color-canvas-overlay);
   border-radius: $primer-borderRadius-large;
   box-shadow: var(--color-overlay-shadow);
   opacity: 1;
-  max-height: 100vh;
-
-  @supports (height: 100dvh) {
-    max-height: 100dvh;
-  }
-
-  // Dimensions
-  // Todo: auto-generate based on Scss variables?
 
   &.Overlay--height-auto {
     height: auto;
   }
 
   &.Overlay--height-xsmall {
-    height: min(#{map-get($Overlay-height, 'xsmall')}, 100vh - 2rem);
+    height: min(192px, 100vh - 2rem);
   }
 
   &.Overlay--height-small {
-    height: min(#{map-get($Overlay-height, 'small')}, 100vh - 2rem);
+    height: min(256px, 100vh - 2rem);
   }
 
   &.Overlay--height-medium {
-    height: min(#{map-get($Overlay-height, 'medium')}, 100vh - 2rem);
+    height: min(320px, 100vh - 2rem);
   }
 
   &.Overlay--height-large {
-    height: min(#{map-get($Overlay-height, 'large')}, 100vh - 2rem);
+    height: min(432px, 100vh - 2rem);
   }
 
   &.Overlay--height-xlarge {
-    height: min(#{map-get($Overlay-height, 'xlarge')}, 100vh - 2rem);
+    height: min(600px, 100vh - 2rem);
   }
 
   &.Overlay--width-auto {
     width: auto;
   }
 
-  &.Overlay--width-xsmall {
-    width: min(#{map-get($Overlay-width, 'xsmall')}, 100vw - 2rem);
-  }
-
   &.Overlay--width-small {
-    width: min(#{map-get($Overlay-width, 'small')}, 100vw - 2rem);
+    width: min(256px, 100vw - 2rem);
   }
 
   &.Overlay--width-medium {
-    width: min(#{map-get($Overlay-width, 'medium')}, 100vw - 2rem);
+    width: min(320px, 100vw - 2rem);
   }
 
   &.Overlay--width-large {
     // stylelint-disable-next-line primer/responsive-widths
-    width: min(#{map-get($Overlay-width, 'large')}, 100vw - 2rem);
+    width: min(480px, 100vw - 2rem);
   }
 
   &.Overlay--width-xlarge {
     // stylelint-disable-next-line primer/responsive-widths
-    width: min(#{map-get($Overlay-width, 'xlarge')}, 100vw - 2rem);
+    width: min(640px, 100vw - 2rem);
   }
 
   &.Overlay--width-xxlarge {
     // stylelint-disable-next-line primer/responsive-widths
-    width: min(#{map-get($Overlay-width, 'xxlarge')}, 100vw - 2rem);
+    width: min(960px, 100vw - 2rem);
   }
 
-  // Motion
-
   &.Overlay--motion-scaleFade {
-    @media (prefers-reduced-motion: no-preference) {
-      // Todo: replace with primer-duration-slow token
-      animation: $primer-duration-slow $primer-easing-out 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;
     }
   }
 
-  // &.Overlay--motion-slide {
-  //   @media (prefers-reduced-motion: no-preference) {
-  //     animation: $primer-duration-slow $primer-easing-out Overlay--motion-slide;
-  //   }
-  // }
+  @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
@@ -163,10 +110,6 @@ $Overlay-height: (
     // stylelint-disable-next-line primer/box-shadow
     box-shadow: inset 0 #{-$border-width} var(--color-border-default);
 
-    .Overlay-subHeader {
-      margin-bottom: -$spacer-2;
-    }
-
     + .Overlay-body {
       padding-top: $spacer-3;
     }
@@ -188,12 +131,6 @@ $Overlay-height: (
     }
   }
 
-  &.Overlay-header--custom {
-    .Overlay-title, .Overlay-description {
-      display: none !important;
-    }
-  }
-
   .Overlay-headerContentWrap {
     display: flex;
     align-items: flex-start;
@@ -229,10 +166,6 @@ $Overlay-height: (
   }
 }
 
-.Overlay-subHeader {
-  padding-inline: $spacer-2;
-}
-
 // generic body content slot
 .Overlay-body {
   padding: $spacer-3;
@@ -322,8 +255,8 @@ $Overlay-height: (
 
 @mixin Overlay-backdrop--transparent() {
   position: absolute;
-  background-color: transparent;
   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)
@@ -343,70 +276,56 @@ $Overlay-height: (
   @include Overlay-backdrop--transparent;
 
   .Overlay {
-    //width: auto;
+    width: auto;
   }
 }
 
 // anchor side(s)
-@mixin Overlay-backdrop--side($viewportRange: '') {
+@mixin Overlay-backdrop--side($responsiveVariant: '') {
   @include Overlay-backdrop;
 
   // default left
   align-items: center;
   justify-content: left;
 
-  &.Overlay-backdrop--placement-left#{$viewportRange} {
+  &.Overlay-backdrop--placement-left#{$responsiveVariant} {
     align-items: center;
     justify-content: left;
 
-    .Overlay {
-      animation: $primer-duration-slow $primer-easing-out Overlay--motion-slideInRight;
+    .Overlay#{$responsiveVariant} {
       border-radius: $primer-borderRadius-large;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
-      height: 100vh;
-
-      @supports(height: 100dvh) {
-        height: 100dvh;
-      }
     }
   }
 
-  &.Overlay-backdrop--placement-right#{$viewportRange} {
+  &.Overlay-backdrop--placement-right#{$responsiveVariant} {
     align-items: center;
     justify-content: right;
 
-    .Overlay {
-      animation: $primer-duration-slow $primer-easing-out Overlay--motion-slideInLeft;
+    .Overlay#{$responsiveVariant} {
       border-radius: $primer-borderRadius-large;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
-      height: 100vh;
-
-      @supports(height: 100dvh) {
-        height: 100dvh;
-      }
     }
   }
 
-  &.Overlay-backdrop--placement-bottom#{$viewportRange} {
+  &.Overlay-backdrop--placement-bottom#{$responsiveVariant} {
     align-items: end;
     justify-content: center;
 
-    .Overlay {
-      animation: $primer-duration-slow $primer-easing-out Overlay--motion-slideInUp;
+    .Overlay#{$responsiveVariant} {
       border-radius: $primer-borderRadius-large;
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
     }
   }
 
-  &.Overlay-backdrop--placement-top#{$viewportRange} {
+  &.Overlay-backdrop--placement-top#{$responsiveVariant} {
     align-items: start;
     justify-content: center;
 
-    .Overlay {
-      animation: $primer-duration-slow $primer-easing-out Overlay--motion-slideInDown;
+    .Overlay#{$responsiveVariant} {
       border-radius: $primer-borderRadius-large;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
@@ -425,32 +344,24 @@ $Overlay-height: (
     max-height: 100vh;
     border-radius: unset;
     flex-grow: 1;
-
-    @supports(height: 100dvh) {
-      max-width: 100dvw;
-      max-height: 100dvh;
-    }
   }
 }
 
 // Overlay variant classnames
-@media (min-width: #{map-get($breakpoints, 'md')}) {
-  // Regular viewports
-  .Overlay-backdrop--center {
-    @include Overlay-backdrop--center;
-  }
+.Overlay-backdrop--center {
+  @include Overlay-backdrop--center;
+}
 
-  .Overlay-backdrop--anchor {
-    @include Overlay-backdrop--anchor;
-  }
+.Overlay-backdrop--anchor {
+  @include Overlay-backdrop--anchor;
+}
 
-  .Overlay-backdrop--side {
-    @include Overlay-backdrop--side;
-  }
+.Overlay-backdrop--side {
+  @include Overlay-backdrop--side;
+}
 
-  .Overlay-backdrop--full {
-    @include Overlay-backdrop--full;
-  }
+.Overlay-backdrop--full {
+  @include Overlay-backdrop--full;
 }
 
 // responsive variants
@@ -472,32 +383,3 @@ $Overlay-height: (
     @include Overlay-backdrop--full;
   }
 }
-
-
-// Animations
-// ==========
-// Todo: Replace with Primer Primitives motion tokens
-
-@keyframes Overlay--motion-slideInUp {
-  from { transform: translateY(25%) }
-}
-@keyframes Overlay--motion-slideInDown {
-  from { transform: translateY(-25%) }
-}
-@keyframes Overlay--motion-slideInRight {
-  from { transform: translateX(-25%) }
-}
-@keyframes Overlay--motion-slideInLeft {
-  from { transform: translateX(25%) }
-}
-@keyframes Overlay--motion-scaleFade {
-  from {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "0.0.0-20220620061649",
+  "version": "0.0.0-20220621152621",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",