@primer/css 20.2.4-rc.ca62d1cf → 20.3.0-rc.74ae3214

package/layout/app-frame.scss

@@ -0,0 +1,155 @@
+// stylelint-disable max-nesting-depth
+// stylelint-disable primer/spacing
+// stylelint-disable primer/borders
+
+.AppFrame {
+
+  // AppFrame structure
+  // ===================
+  //
+  // .AppFrame
+  // ├─ .AppFrame-a11yNav
+  // │  ├─ .AppFrame-a11yLink
+  // │
+  // ├─ .AppFrame-main
+  // │  ├─ .AppFrame-header-wrapper
+  // │  │   ├─ .AppFrame-header
+  // │  │   ├─ .AppFrame-subheader
+  // │  │
+  // │  ├─ #start-of-content
+  // │  ├─ .AppFrame-body
+  // │  ├─ .AppFrame-footer
+
+  // Accessibility navigation
+
+  .AppFrame-a11yNav {
+    position: absolute;
+    z-index: 1000;
+    display: flex;
+    width: 100%;
+    padding: var(--base-size-16, 16px);
+    background: var(--color-canvas-inset);
+    padding-block-end: calc(var(--base-size-16, 16px) - var(--primer-borderWidth-thin, 1px));
+    isolation: isolate;
+    align-items: center;
+    gap: var(--base-size-8, 8px);
+
+    &:not(:focus-within) {
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(1px, 1px, 1px, 1px);
+      border: 0;
+    }
+
+    &:focus-within {
+      top: 0;
+      left: 0;
+
+      // Narrow viewport
+      @media (max-width: #{map-get($breakpoints, 'md') - 0.02px}) {
+        justify-content: center;
+      }
+    }
+  }
+
+  .AppFrame-a11yLink {
+    transition: none;
+
+    &:not(:focus) {
+      display: block;
+      width: var(--base-size-8, 8px);
+      height: var(--base-size-8, 8px);
+      overflow: hidden;
+      text-indent: var(--base-size-128, 128px);
+      pointer-events: none;
+      background: var(--color-border-default);
+      border-radius: var(--primer-borderRadius-full, 100vh);
+    }
+
+    &:focus {
+      z-index: 20;
+      display: grid;
+      width: auto;
+      height: auto;
+      min-height: var(--primer-control-medium-size, 32px);
+      padding: 0 var(--primer-control-medium-paddingInline-spacious, 16px);
+      overflow: auto;
+      color: var(--color-fg-on-emphasis);
+      background: var(--color-accent-emphasis);
+      border-radius: var(--primer-borderRadius-full, 100vh);
+      align-items: center;
+
+      @media (pointer: coarse) {
+        &::after {
+          @include minTouchTarget(var(--primer-control-minTarget-coarse, 44px));
+        }
+      }
+
+      @media (prefers-reduced-motion: no-preference) {
+        animation: AppFrame-a11yLink-focus 200ms ease-out;
+      }
+
+      @keyframes AppFrame-a11yLink-focus {
+        0% {
+          color: var(--color-accent-emphasis);
+          transform: scale(0.3, 0.25);
+        }
+
+        50% {
+          color: var(--color-accent-emphasis);
+          transform: scale(1, 1);
+        }
+
+        55% {
+          color: var(--color-fg-on-emphasis);
+        }
+
+        100% {
+          transform: scaleX(1);
+        }
+      }
+    }
+  }
+
+  .AppFrame-main {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+
+    @supports (height: 100dvh) {
+      min-height: 100dvh;
+    }
+  }
+
+  .AppFrame-header-wrapper {
+    position: relative;
+    height: min-content;
+    overflow: visible;
+
+    .AppFrame-header {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  }
+
+  .AppFrame-header {
+    flex: 0 0 auto;
+  }
+
+  .AppFrame-subheader {
+    flex: 0 0 auto;
+  }
+
+  .AppFrame-body {
+    flex: 1 0;
+    height: 100%;
+  }
+
+  .AppFrame-footer {
+    flex: 0 0 auto;
+  }
+}

package/layout/index.scss

@@ -1,4 +1,5 @@
 @import '../support/index.scss';
+@import './app-frame.scss';
 @import './mixins.scss';
 @import './container.scss';
 @import './grid.scss';

package/navigation/underline-nav.scss

@@ -85,7 +85,6 @@ $nav-height: $spacer-3 * 3 !default; // 48px
     font-weight: $font-weight-bold;
     color: var(--color-fg-default);
     border-bottom-color: var(--color-primer-border-active);
-    outline-offset: -8px;
 
     // current/selected underline
     &::after {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "20.2.4-rc.ca62d1cf",
+  "version": "20.3.0-rc.74ae3214",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -41,7 +41,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.8.3"
+    "@primer/primitives": "^7.8.4"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.4",
@@ -56,7 +56,7 @@
     "eslint-plugin-github": "4.3.6",
     "eslint-plugin-jest": "26.1.5",
     "eslint-plugin-prettier": "4.0.0",
-    "filesize": "8.0.7",
+    "filesize": "9.0.1",
     "front-matter": "4.0.2",
     "fs-extra": "10.1.0",
     "globby": "13.1.1",