@primer/css 20.8.0-rc.f2ea6d86 → 20.8.0

package/navigation/underline-nav.scss

@@ -1,136 +1 @@
-$nav-height: $spacer-3 * 3 !default; // 48px
-
-.UnderlineNav {
-  display: flex;
-  min-height: $nav-height;
-  overflow-x: auto;
-  overflow-y: hidden;
-  // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-border-muted);
-  -webkit-overflow-scrolling: auto;
-  justify-content: space-between;
-
-  .Counter {
-    margin-left: $spacer-2;
-    color: var(--color-fg-default);
-    background-color: var(--color-neutral-muted);
-
-    &--primary {
-      color: var(--color-fg-on-emphasis);
-      background-color: var(--color-neutral-emphasis);
-    }
-  }
-}
-
-.UnderlineNav-body {
-  display: flex;
-  align-items: center;
-  gap: $spacer-2;
-  list-style: none;
-}
-
-.UnderlineNav-item {
-  position: relative;
-  display: flex;
-  padding: 0 $spacer-2;
-  font-size: $body-font-size;
-  // stylelint-disable-next-line primer/typography
-  line-height: 30px;
-  color: var(--color-fg-default);
-  text-align: center;
-  white-space: nowrap;
-  cursor: pointer;
-  background-color: transparent;
-  border: 0;
-  border-radius: $border-radius;
-  align-items: center;
-
-  &:hover,
-  &:focus,
-  &:focus-visible {
-    color: var(--color-fg-default);
-    text-decoration: none;
-    border-bottom-color: var(--color-neutral-muted);
-    outline-offset: -2px;
-    transition: border-bottom-color 0.12s ease-out;
-  }
-
-  // renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected
-  [data-content]::before {
-    display: block;
-    height: 0;
-    font-weight: $font-weight-bold;
-    visibility: hidden;
-    content: attr(data-content);
-  }
-
-  // increase touch target area
-  &::before {
-    @include minTouchTarget($min-height: $nav-height);
-  }
-
-  // hover state was "sticking" on mobile after click
-  @media (pointer: fine) {
-    &:hover {
-      color: var(--color-fg-default);
-      text-decoration: none;
-      background: var(--color-action-list-item-default-hover-bg);
-      transition: background 0.12s ease-out;
-    }
-  }
-
-  &.selected,
-  &[role='tab'][aria-selected='true'],
-  &[aria-current]:not([aria-current='false']) {
-    font-weight: $font-weight-bold;
-    color: var(--color-fg-default);
-    border-bottom-color: var(--color-primer-border-active);
-
-    // current/selected underline
-    &::after {
-      position: absolute;
-      right: 50%;
-      // 48px total height / 2 (24px) + 1px
-      bottom: calc(50% - 25px);
-      width: 100%;
-      height: 2px;
-      content: '';
-      background: var(--color-primer-border-active);
-      border-radius: $border-radius;
-      transform: translate(50%, -50%);
-    }
-  }
-}
-
-.UnderlineNav--right {
-  justify-content: flex-end;
-
-  .UnderlineNav-actions {
-    flex: 1 1 auto;
-  }
-}
-
-.UnderlineNav-actions {
-  align-self: center;
-}
-
-.UnderlineNav--full {
-  display: block;
-
-  // required for underline to align with additional wrapper element
-  .UnderlineNav-body {
-    min-height: $nav-height;
-  }
-}
-
-.UnderlineNav-octicon {
-  display: inline !important;
-  margin-right: $spacer-2;
-  color: var(--color-fg-muted);
-  fill: var(--color-fg-muted);
-}
-
-.UnderlineNav-container {
-  display: flex;
-  justify-content: space-between;
-}
+@import '@primer/view-components/app/components/primer/alpha/underline_nav';

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.f2ea6d86",
+  "version": "20.8.0",
   "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.111"
+    "@primer/view-components": "^0.0.115"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.6",
@@ -56,23 +56,23 @@
     "cssstats": "4.0.5",
     "eslint": "8.25.0",
     "eslint-plugin-github": "4.3.7",
-    "eslint-plugin-jest": "27.1.3",
+    "eslint-plugin-jest": "27.1.6",
     "eslint-plugin-prettier": "4.2.1",
-    "filesize": "9.0.11",
+    "filesize": "10.0.5",
     "front-matter": "4.0.2",
     "fs-extra": "10.1.0",
     "globby": "13.1.2",
-    "jest": "29.0.3",
+    "jest": "29.3.1",
     "js-yaml": "4.1.0",
     "postcss": "8.4.18",
     "postcss-calc": "8.2.4",
     "postcss-import": "15.0.0",
     "postcss-load-config": "4.0.1",
-    "postcss-scss": "4.0.4",
+    "postcss-scss": "4.0.5",
     "postcss-simple-vars": "6.0.3",
     "prettier": "2.7.1",
     "semver": "7.3.7",
-    "stylelint": "14.14.0",
+    "stylelint": "14.15.0",
     "table": "6.8.0"
   },
   "jest": {