@primer/css 20.0.0-rc.f7fbc78b → 20.1.0-rc.6bae6aba

package/markdown/headings.scss

@@ -80,6 +80,11 @@
     h5,
     h6 {
       display: inline-block;
+
+      .anchor {
+        // stylelint-disable-next-line primer/spacing
+        margin-left: -40px;
+      }
     }
 
     h1,

package/navigation/underline-nav.scss

@@ -1,4 +1,3 @@
-// stylelint-disable selector-max-specificity
 $nav-height: $spacer-3 * 3 !default; // 48px
 
 .UnderlineNav {
@@ -10,6 +9,17 @@ $nav-height: $spacer-3 * 3 !default; // 48px
   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 {
@@ -41,65 +51,54 @@ $nav-height: $spacer-3 * 3 !default; // 48px
     color: var(--color-fg-default);
     text-decoration: none;
     border-bottom-color: var(--color-neutral-muted);
-    outline-offset: -8px;
+    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);
-    }
+  // 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);
+  }
 
-    // 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;
-      }
-    }
+  // increase touch target area
+  &::before {
+    @include minTouchTarget($min-height: $nav-height);
+  }
 
-    &.selected,
-    &[role='tab'][aria-selected='true'],
-    &[aria-current]:not([aria-current='false']) {
-      font-weight: $font-weight-bold;
+  // hover state was "sticking" on mobile after click
+  @media (pointer: fine) {
+    &:hover {
       color: var(--color-fg-default);
-      border-bottom-color: var(--color-primer-border-active);
-      outline-offset: -8px;
-
-      // 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%);
-      }
+      text-decoration: none;
+      background: var(--color-action-list-item-default-hover-bg);
+      transition: background 0.12s ease-out;
     }
   }
 
-  .Counter {
-    margin-left: $spacer-2;
+  &.selected,
+  &[role='tab'][aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    font-weight: $font-weight-bold;
     color: var(--color-fg-default);
-    background-color: var(--color-neutral-muted);
+    border-bottom-color: var(--color-primer-border-active);
+    outline-offset: -8px;
 
-    &--primary {
-      color: var(--color-fg-on-emphasis);
-      background-color: var(--color-neutral-emphasis);
+    // 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%);
     }
   }
 }

package/overlay/README.md

@@ -0,0 +1,24 @@
+---
+bundle: 'overlay'
+generated: true
+---
+
+# Primer CSS: `overlay` 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/overlay/index.scss';
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/overlay.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/main/LICENSE) © [GitHub](https://github.com/)
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

package/overlay/index.scss

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

package/overlay/overlay.scss

@@ -0,0 +1,384 @@
+// 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;
+  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;
+
+  &.Overlay--height-auto {
+    height: auto;
+  }
+
+  &.Overlay--height-xsmall {
+    height: min(192px, 100% - 2rem);
+  }
+
+  &.Overlay--height-small {
+    height: min(256px, 100% - 2rem);
+  }
+
+  &.Overlay--height-medium {
+    height: min(320px, 100% - 2rem);
+  }
+
+  &.Overlay--height-large {
+    height: min(432px, 100% - 2rem);
+  }
+
+  &.Overlay--height-xlarge {
+    height: min(600px, 100% - 2rem);
+  }
+
+  &.Overlay--width-auto {
+    width: auto;
+  }
+
+  &.Overlay--width-small {
+    width: min(256px, 100% - 2rem);
+  }
+
+  &.Overlay--width-medium {
+    width: min(320px, 100% - 2rem);
+  }
+
+  &.Overlay--width-large {
+    // stylelint-disable-next-line primer/responsive-widths
+    width: min(480px, 100% - 2rem);
+  }
+
+  &.Overlay--width-xlarge {
+    // stylelint-disable-next-line primer/responsive-widths
+    width: min(640px, 100% - 2rem);
+  }
+
+  &.Overlay--width-xxlarge {
+    // stylelint-disable-next-line primer/responsive-widths
+    width: min(960px, 100% - 2rem);
+  }
+
+  &.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;
+  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} {
+      border-radius: $primer-borderRadius-large;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  &.Overlay-backdrop--placement-right#{$responsiveVariant} {
+    align-items: center;
+    justify-content: right;
+
+    .Overlay#{$responsiveVariant} {
+      border-radius: $primer-borderRadius-large;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  &.Overlay-backdrop--placement-bottom#{$responsiveVariant} {
+    align-items: end;
+    justify-content: center;
+
+    .Overlay#{$responsiveVariant} {
+      border-radius: $primer-borderRadius-large;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  &.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;
+    }
+  }
+}
+
+// full width
+@mixin Overlay-backdrop--full {
+  @include Overlay-backdrop;
+
+  .Overlay {
+    width: 100%;
+    max-width: 100vw;
+    height: 100%;
+    max-height: 100vh;
+    border-radius: unset;
+    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;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "20.0.0-rc.f7fbc78b",
+  "version": "20.1.0-rc.6bae6aba",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -49,12 +49,12 @@
     "@github/prettier-config": "0.0.4",
     "@koddsson/postcss-sass": "5.0.1",
     "@primer/stylelint-config": "^12.4.0",
-    "autoprefixer": "10.4.4",
+    "autoprefixer": "10.4.6",
     "chokidar-cli": "3.0.0",
     "cssstats": "4.0.5",
-    "eslint": "8.13.0",
+    "eslint": "8.14.0",
     "eslint-plugin-github": "4.3.6",
-    "eslint-plugin-jest": "26.0.0",
+    "eslint-plugin-jest": "26.1.5",
     "eslint-plugin-prettier": "4.0.0",
     "filesize": "8.0.7",
     "front-matter": "4.0.2",
@@ -62,11 +62,11 @@
     "globby": "13.1.1",
     "jest": "27.5.1",
     "js-yaml": "4.1.0",
-    "postcss": "8.4.12",
+    "postcss": "8.4.13",
     "postcss-calc": "8.2.4",
     "postcss-import": "14.1.0",
     "postcss-load-config": "3.1.4",
-    "postcss-scss": "4.0.3",
+    "postcss-scss": "4.0.4",
     "postcss-simple-vars": "6.0.3",
     "prettier": "2.6.2",
     "semver": "7.3.7",

package/product/index.scss

@@ -24,4 +24,4 @@
 @import '../select-menu/index.scss';
 @import '../subhead/index.scss';
 @import '../timeline/index.scss';
-@import '../toasts/index.scss'
+@import '../toasts/index.scss';

package/utilities/typography.scss

@@ -243,3 +243,8 @@
 .user-select-none {
   user-select: none !important;
 }
+
+/* Make text capitalized (transforms first character to uppercase) */
+.text-capitalize {
+  text-transform: capitalize !important;
+}