@primer/css 0.0.0-20220623194503 → 0.0.0-20220625011950

package/CHANGELOG.md

@@ -1,46 +1,14 @@
 # @primer/css
 
-## 0.0.0-20220623194503
-
-### Patch Changes
-
-- Fake entry to force publishing
-
-* [#2130](https://github.com/primer/css/pull/2130) [`544fb277`](https://github.com/primer/css/commit/544fb2773dbadd934a34232637970946de3c536d) Thanks [@renbaoshuo](https://github.com/renbaoshuo)! - Add link to source code in Timeline's doc
-
-- [#2132](https://github.com/primer/css/pull/2132) [`c898103e`](https://github.com/primer/css/commit/c898103e0e942b7ab07f43b83496f019163458f1) Thanks [@vzrenggamani](https://github.com/vzrenggamani)! - docs: update deployment location of docs
-
-## 20.2.3
-
-### Patch Changes
-
-- [#2124](https://github.com/primer/css/pull/2124) [`f1b3e55f`](https://github.com/primer/css/commit/f1b3e55f141ddaa5719d223d4670d935bf9d5337) Thanks [@langermank](https://github.com/langermank)! - FormControl + Overlay bug fixes
-
-* [#2129](https://github.com/primer/css/pull/2129) [`2cc18d03`](https://github.com/primer/css/commit/2cc18d0348dc667961c9374886c8a82e95334d6f) Thanks [@camertron](https://github.com/camertron)! - Fix preview deploys
-
-- [#2077](https://github.com/primer/css/pull/2077) [`ab078a58`](https://github.com/primer/css/commit/ab078a58c6ebe4118f917bed4c71fbbb56f0634f) Thanks [@mlynam](https://github.com/mlynam)! - Make .form-control elements render as disabled when a parent fieldset is disabled
-
-## 20.2.2
-
-### Patch Changes
-
-- [#2075](https://github.com/primer/css/pull/2075) [`9f576a3c`](https://github.com/primer/css/commit/9f576a3c33479fa0beb5ef4fe9b794f67a58070c) Thanks [@langermank](https://github.com/langermank)! - FormControl + Autocomplete component updates
-
-## 20.2.1
-
-### Patch Changes
-
-- [#2094](https://github.com/primer/css/pull/2094) [`33f799f1`](https://github.com/primer/css/commit/33f799f13edad2e7434425913a8d445aa27213de) Thanks [@camertron](https://github.com/camertron)! - Add missing ToggleSwitch--checked styles
-
-* [#2091](https://github.com/primer/css/pull/2091) [`f740d008`](https://github.com/primer/css/commit/f740d00827fa854062f6ce3449ca6745fae9bea8) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Bump font size of large buttons
-
-## 20.2.0
+## 0.0.0-20220625011950
 
 ### Minor Changes
 
 - [#2087](https://github.com/primer/css/pull/2087) [`8354de5c`](https://github.com/primer/css/commit/8354de5c5eeb60e447712c04e25c2ef370206488) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Changing `PageLayout--isPaneSticky` to `PageLayout--sticky`.
 
-* [#2074](https://github.com/primer/css/pull/2074) [`5cfae2c2`](https://github.com/primer/css/commit/5cfae2c2193885c34af97dd61da201c400bc8549) Thanks [@camertron](https://github.com/camertron)! - Add styles for the ToggleSwitch component
+### Patch Changes
+
+- Fake entry to force publishing
 
 ## 20.1.1
 

package/actionlist/action-list-item.scss

@@ -37,7 +37,7 @@
           outline: $border-style $border-width transparent;
           outline-offset: -$border-width;
           // stylelint-disable-next-line primer/box-shadow
-          box-shadow: inset 0 0 0 $border-width var(--color-action-list-item-default-active-border);
+          box-shadow: inset 0 0 0 2px var(--color-action-list-item-default-active-border);
         }
       }
     }
@@ -50,7 +50,7 @@
         outline: $border-style $border-width transparent;
         outline-offset: -$border-width;
         // stylelint-disable-next-line primer/box-shadow
-        box-shadow: inset 0 0 0 $border-width var(--color-action-list-item-default-active-border);
+        box-shadow: inset 0 0 0 2px var(--color-action-list-item-default-active-border);
       }
 
       @media screen and (prefers-reduced-motion: no-preference) {
@@ -235,27 +235,6 @@
     }
   }
 
-  // disabled
-  &[aria-disabled='true'] {
-    .ActionList-item-content {
-      .ActionList-item-label,
-      .ActionList-item-description {
-        color: var(--color-primer-fg-disabled);
-      }
-
-      .ActionList-item-visual {
-        fill: var(--color-primer-fg-disabled);
-      }
-
-      @media (hover: hover) {
-        &:hover {
-          cursor: not-allowed;
-          background-color: transparent;
-        }
-      }
-    }
-  }
-
   // variants
 
   // danger

package/app/README.md

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

package/app/app-frame.scss

@@ -0,0 +1,170 @@
+// stylelint-disable max-nesting-depth
+// stylelint-disable selector-max-specificity
+// stylelint-disable no-duplicate-selectors
+
+.AppFrame {
+
+  // Accessibility navigation
+
+  .AppFrame-a11yNav {
+    position: absolute;
+    padding: var(--base-size-16) var(--base-size-16) var(--base-size-8);
+    top: calc(var(--base-size-128) * -1);
+    left: 0;
+    background: #F6F8FA; /* fixme */
+    z-index: 1000;
+    width: 100%;
+
+    ul, li {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    ul {
+      display: flex;
+      align-items: center;
+      gap: var(--base-size-8);
+    }
+
+    &:focus-within {
+      top: 0;
+
+      // Narrow viewport
+      @media (max-width: #{map-get($breakpoints, 'md') - 0.02px}) {
+        ul {
+          justify-content: center;
+        }
+      }
+    }
+  }
+
+  .AppFrame-a11yLink {
+    transition: none;
+
+    &:not(:focus) {
+      width: var(--base-size-8);
+      height: var(--base-size-8);
+      display: block;
+      overflow: hidden;
+      text-indent: var(--base-size-128);
+      border-radius: 100%;
+      background: var(--color-border-default);
+      pointer-events: none;
+    }
+
+    &:focus {
+      display: grid;
+      z-index: 20;
+      width: auto;
+      height: auto;
+      overflow: auto;
+      border-radius: var(--base-size-24);
+      min-height: var(--base-size-32);
+      align-items: center;
+      padding: 0 var(--base-size-16);
+      background: var(--color-accent-fg);
+      color: var(--color-fg-on-emphasis);
+
+      @media (pointer: coarse) {
+        &:after {
+          // pull from minTouchTarget design token
+          @include minTouchTarget(var(--primer-control-minTarget-coarse));
+        }
+      }
+
+      @media (prefers-reduced-motion: no-preference) {
+        animation: AppFrame-a11yLink-focus 200ms ease-out;
+      }
+
+      @keyframes AppFrame-a11yLink-focus {
+        0% {
+          transform: scale(0.3, 0.25);
+          color: var(--color-accent-fg);
+        }
+        50% {
+          transform: scale(1, 1);
+          color: var(--color-accent-fg);
+        }
+        55% {
+          color: var(--color-fg-on-emphasis);
+        }
+        100% {
+          transform: scaleX(1);
+        }
+      }
+    }
+  }
+
+  .AppFrame-main {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .AppFrame-header-wrapper {
+    position: relative;
+    overflow: visible; 
+    height: min-content;
+
+    .AppFrame-header {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  }
+
+  .AppFrame-header {
+    flex: 0 0 auto;
+  }
+
+  .AppFrame-tray {
+    overflow: hidden;
+    flex: 0 0 auto;
+    background: linear-gradient(to bottom, var(--color-border-default) -#{$spacer-3}, var(--color-canvas-inset) #{$spacer-2});
+
+    @keyframes flash-tray--appear {
+      from {
+        opacity: 0;
+        transform: translateY(-$spacer-4);
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    @include breakpoint(md) {
+      padding: $spacer-2 $spacer-3;
+      border-bottom: $border-width $border-style var(--color-border-default);
+
+      .Flash {
+        animation: flash-tray--appear 160ms 80ms both cubic-bezier(0.33, 1, 0.68, 1);
+
+        & + .Flash {
+          margin-top: $spacer-2;
+          animation-delay: 160ms;
+        }
+      }
+    }
+
+    &:empty {
+      display: none;
+    }
+
+    // FIXME: use theme-high-contrast mixin
+    @at-root :is([data-color-mode="light"][data-light-theme$='high_contrast'], [data-color-mode="dark"][data-dark-theme$='high_contrast']) & {
+      background: var(--color-canvas-inset);
+    }
+  }
+
+  .AppFrame-body {
+    flex: 1 0;
+    height: 100%;
+  }
+
+  .AppFrame-footer {
+    border-top: $border-width $border-style var(--color-border-default);
+    background: var(--color-canvas-inset);
+    padding: $spacer-3;
+  }
+}