@primer/css 0.0.0-20220603095901 → 0.0.0-20220608014129

package/CHANGELOG.md

@@ -1,34 +1,14 @@
 # @primer/css
 
-## 0.0.0-20220603095901
-
-### Patch Changes
-
-- Fake entry to force publishing
-
-* [#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-20220608014129
 
 ### 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;
+  }
+}

package/app/app-header.scss

@@ -0,0 +1,326 @@
+.AppHeader {
+  --AppHeader-bg: #F6F8FA; /* bg.subtle? */
+  --AppHeader-bg: var(--color-canvas-inset);
+
+  background: var(--AppHeader-bg);
+  color: var(--color-fg-default);
+
+  // Global bar
+
+  .AppHeader-globalBar {
+    padding: var(--base-size-16, 16px); // Replace with `base-size-16`
+    display: flex;
+    gap: var(--base-size-8, 8px); // Replace with `base-size-16`
+
+    // #region [ logo + avatar ]
+
+    .AppHeader-logo, .AppHeader-user {
+      flex: 0 0 auto;
+      display: grid;
+      width: var(--base-size-32, 32px);
+      height: var(--base-size-32, 32px);
+
+      button, a {
+        grid-area: 1 / 1;
+        display: block;
+        width: var(--base-size-32, 32px);
+        height: var(--base-size-32, 32px);
+      }
+
+      button {
+        background: transparent;
+        padding: 0;
+        border: none;
+        border-radius: 100%;
+        outline-offset: var(--primer-borderWidth-normal, 2px);
+      }
+
+      a {
+        grid-area: 1 / 1;
+        position: relative;
+        overflow: hidden;
+        text-indent: var(--base-size-128, 128px);
+        color: transparent;
+
+        @media (pointer: coarse) {
+          &:after {
+            // pull from minTouchTarget design token
+            @include minTouchTarget(var(--primer-control-minTarget-coarse, 44px), var(--primer-control-minTarget-coarse, 44px));
+          }
+        }
+      }
+    }
+
+    .AppHeader-logo svg {
+      width: var(--base-size-32, 32px);
+      height: var(--base-size-32, 32px);
+    }
+
+    .AppHeader-user {
+      background: var(--color-neutral-muted);
+      border-radius: 100%;
+      position: relative;
+
+      img {
+        display: block;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+      }
+
+      &:before {
+        pointer-events: none;
+        content: "";
+        display: block;
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+        box-shadow: inset 0 0 0 var(--primer-borderWidth-thin, 1px) var(--color-border-subtle);
+      }
+    }
+
+    // #endregion [ logo + avatar ]
+
+    // #region [ Context ]
+    // Breadcrumb, title, any contextual information directly after the logo
+
+    .AppHeader-context {
+      flex: 1 1 auto;
+      height: var(--base-size-32, 32px);
+      //background: #ececec;
+    }
+
+    // #endregion [ Context ]
+
+    // #region [ Search ]
+
+    .AppHeader-search {
+      position: relative;
+      width: 400px;
+
+      .AppHeader-search-wrap {
+        display: grid;
+      }
+
+      .AppHeader-search-label {
+        grid-area: 1 / 1;
+        display: block;
+        font-weight: normal;
+        color: var(--color-fg-subtle); // non-essential
+        pointer-events: none;
+        z-index: 1;
+        padding-block: var(--primer-control-medium-paddingBlock);
+        padding-inline: calc(var(--primer-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--primer-control-medium-gap));
+        line-height: var(--primer-text-body-lineHeight-medium, 20px);
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+
+        kbd {
+          display: inline-grid;
+          align-items: center;
+          justify-content: center;
+          background: transparent;
+          border-radius: var(--primer-borderRadius-small);
+          vertical-align: baseline;
+          width: var(--base-size-12);
+          height: var(--base-size-16);
+          border: var(--primer-borderWidth-thin, 1px) solid var(--color-fg-subtle);
+          color: inherit;
+          padding: 0;
+          box-shadow: none;
+        }
+      }
+
+      .AppHeader-search-control {
+        grid-area: 1 / 1;
+        position: relative;
+        z-index: 2;
+      }
+
+      .AppHeader-search-visual--leading {
+        position: absolute;
+        display: block;
+        width: var(--base-size-16, 16px);
+        height: var(--base-size-16, 16px);
+        top: var(--base-size-8, 8px);
+        left: var(--base-size-8, 8px);
+        color: var(--color-fg-muted);
+        pointer-events: none;
+
+        svg {
+          display: block !important;
+        }
+      }
+
+      input[type="search"] {
+        width: 100%;
+        padding-block: calc(var(--primer-control-medium-paddingBlock) - var(--primer-borderWidth-thin));
+        padding-inline: calc(var(--primer-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--primer-control-medium-gap) - var(--primer-borderWidth-thin));
+
+        &:placeholder-shown {
+          background: transparent;
+        }
+
+        &:not(:placeholder-shown) {
+          background: var(--color-canvas-default);
+        }
+
+        &::placeholder {
+          opacity: 1;
+          color: transparent;
+        }
+
+        &:focus {
+          background: var(--color-canvas-default);
+
+          &::placeholder {
+            color: var(--color-fg-subtle);
+            transition: color 120ms linear;
+          }
+
+          &:-moz-placeholder {
+            opacity: 1;
+            color: var(--color-fg-subtle);
+            transition: color 120ms linear;
+          }
+        }
+      }
+
+      .AppHeader-search-action--trailing {
+        display: grid;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: var(--base-size-4, 4px);
+        right: var(--base-size-4, 4px);
+        z-index: 4;
+        width: var(--primer-control-xsmall-size, 24px);
+        height: var(--primer-control-xsmall-size, 24px);
+        padding: 0;
+        border: none;
+        border-radius: var(--primer-borderRadius-small);
+        background: transparent;
+        color: var(--color-fg-muted);
+
+        &:hover {
+          background: var(--color-action-list-item-default-hover-bg);
+        }
+
+        &:active {
+          background: var(--color-action-list-item-default-active-bg);
+        }
+
+        &:before {
+          content: "";
+          display: block;
+          position: absolute;
+          top: calc((var(--primer-control-xsmall-size) - var(--base-size-16)) / 2);
+          left: calc(var(--base-size-4, 4px) * -1);
+          width: var(--primer-borderWidth-thin);
+          height: var(--base-size-16);
+          background: var(--color-border-default);
+        }
+
+        &:after {
+          @include minTouchTarget(var(--primer-control-medium-size), var(--primer-control-medium-size));
+
+          @media (pointer: coarse) {
+            min-width: var(--primer-control-minTarget-coarse);
+            min-height: var(--primer-control-minTarget-coarse);
+          }
+        }
+
+        svg {
+          color: inherit;
+        }
+      }
+    }
+    // #endregion [ Search ] 
+
+    // #region [ Actions ]
+
+    .AppHeader-divider {
+      height: var(--base-size-20, 20px);
+      width: var(--primer-borderWidth-thin, 1px);
+      height: var(--base-size-20, 20px);
+      background: var(--color-border-default);
+      margin: calc((var(--primer-control-medium-size) - var(--base-size-20)) / 2) 0;
+    }
+
+    // #endregion [ Actions ]
+
+  }
+
+  // Local bar
+
+  .AppHeader-localBar {
+    padding: 0 var(--base-size-16, 16px) var(--base-size-16, 16px);
+    //background: lightcyan;
+    box-shadow: inset 0 calc(var(--primer-borderWidth-thin, 1px) * -1) var(--color-border-default);
+  }
+
+  // AppHeader items
+
+  .AppHeader-item {
+    flex: 0 0 auto;
+    background: lightpink;
+  }
+
+  .AppHeader-item--full {
+    flex-grow: 1;
+  }
+
+  .AppHeader-button {
+    position: relative;
+    display: grid;
+    width: var(--base-size-32);
+    height: var(--base-size-32);
+    border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+    border-radius: var(--primer-borderRadius-medium, 6px);
+    color: var(--color-fg-muted);
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      display: block !important;
+      color: inherit !important;
+      width: var(--base-size-16);
+      height: var(--base-size-16);
+    }
+
+    &:hover {
+      background: var(--color-action-list-item-default-hover-bg);
+    }
+
+    &:active {
+      background: var(--color-action-list-item-default-active-bg);
+    }
+
+    @media (pointer: coarse) {
+      &:after {
+        // pull from minTouchTarget design token
+        @include minTouchTarget(var(--primer-control-minTarget-coarse, 44px), var(--primer-control-minTarget-coarse, 44px));
+      }
+    }
+
+    &.AppHeader-button--hasIndicator:before {
+      position: absolute;
+      content: "";
+      display: block;
+      top: -2px;
+      right: -2px;
+      z-index: 2;
+      background: var(--color-accent-fg);
+      border-radius: 100%;
+      width: 8px;
+      height: 8px;
+      box-shadow: 0 0 0 2px var(--AppHeader-bg);
+    }
+  }
+}

package/app/index.scss

@@ -0,0 +1,4 @@
+@import '../support/index.scss';
+@import './app-frame.scss';
+@import './app-header.scss';
+@import './app-footer.scss';

package/autocomplete/autocomplete.scss

@@ -1,6 +1,3 @@
-// This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796
-// AutoComplete relies on FormControl, Overlay and ActionList CSS
-
 // Stacked label (default)
 .autocomplete-label-stacked {
   display: block;