@primer/css 20.8.0-rc.62a861ec → 20.8.0-rc.711c79b3

package/CHANGELOG.md

@@ -4,12 +4,30 @@
 
 ### Minor Changes
 
+- [`d7a4c343`](https://github.com/primer/css/commit/d7a4c343ab1bc0d7f55ff85d735c93d9825419ae) Thanks [@jonrohan](https://github.com/jonrohan)! - Importing more styles from Primer View Components
+
+  - https://github.com/primer/view_components/pull/1587
+  - https://github.com/primer/view_components/pull/1590
+  - https://github.com/primer/view_components/pull/1592
+  - https://github.com/primer/view_components/pull/1593
+  - https://github.com/primer/view_components/pull/1594
+  - https://github.com/primer/view_components/pull/1598
+  - https://github.com/primer/view_components/pull/1599
+  - https://github.com/primer/view_components/pull/1600
+  - https://github.com/primer/view_components/pull/1601
+  - https://github.com/primer/view_components/pull/1607
+  - https://github.com/primer/view_components/pull/1609
+  - https://github.com/primer/view_components/pull/1618
+  - https://github.com/primer/view_components/pull/1626
+
 - [#2318](https://github.com/primer/css/pull/2318) [`aee4b6f5`](https://github.com/primer/css/commit/aee4b6f571d88f391fcf98170857c4eed7b1ae82) Thanks [@jonrohan](https://github.com/jonrohan)! - Import blankslate styles from primer/view-components
 
 ### Patch Changes
 
 - [#2330](https://github.com/primer/css/pull/2330) [`83250f82`](https://github.com/primer/css/commit/83250f82751092cc9ad3a8fb46262a0f0f2a3a96) Thanks [@stevenlaidlaw](https://github.com/stevenlaidlaw)! - Fix collapsing spaces within inline code blocks
 
+- [#2327](https://github.com/primer/css/pull/2327) [`8cf13e98`](https://github.com/primer/css/commit/8cf13e984ca27a286a706fd2b7243980d3de7985) Thanks [@simurai](https://github.com/simurai)! - Move `fieldset` + `label` styles to `base.scss`
+
 ## 20.7.1
 
 ### Patch Changes

package/alerts/flash.scss

@@ -1,155 +1 @@
-// stylelint-disable selector-max-type, no-duplicate-selectors
-
-// Default flash
-.flash:not(.Banner) {
-  position: relative;
-  // stylelint-disable-next-line primer/spacing
-  padding: 20px $spacer-3;
-  border-style: $border-style;
-  border-width: $border-width;
-  border-radius: $border-radius;
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  .octicon {
-    // stylelint-disable-next-line primer/spacing
-    margin-right: 12px;
-  }
-}
-
-// Contain the flash messages
-.flash-messages {
-  margin-bottom: $spacer-4;
-}
-
-// Close button
-.flash-close:not(.Banner-close) {
-  float: right;
-  padding: $spacer-3;
-  margin: -$spacer-3;
-  text-align: center;
-  cursor: pointer;
-
-  // Undo `<button>` styles
-  background: none;
-  border: 0;
-  appearance: none;
-
-  &:hover {
-    opacity: 0.7;
-  }
-
-  &:active {
-    opacity: 0.5;
-  }
-
-  .octicon {
-    margin-right: 0;
-  }
-}
-
-// Action button
-.flash-action:not(.Banner-actions) {
-  float: right;
-  // stylelint-disable-next-line primer/spacing
-  margin-top: -3px;
-  margin-left: $spacer-4;
-  background-clip: padding-box;
-
-  &.btn .octicon {
-    margin-right: $spacer-1;
-    color: var(--color-fg-muted);
-  }
-
-  &.btn-primary {
-    background-clip: border-box;
-
-    .octicon {
-      color: inherit;
-    }
-  }
-}
-
-//
-// Color variations
-//
-
-.flash:not(.Banner) {
-  color: var(--color-fg-default);
-  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
-  border-color: var(--color-accent-muted);
-
-  .octicon {
-    color: var(--color-accent-fg);
-  }
-}
-
-.flash-warn:not(.Banner) {
-  color: var(--color-fg-default);
-  background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
-  border-color: var(--color-attention-muted);
-
-  .octicon {
-    color: var(--color-attention-fg);
-  }
-}
-
-.flash-error:not(.Banner) {
-  color: var(--color-fg-default);
-  background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
-  border-color: var(--color-danger-muted);
-
-  .octicon {
-    color: var(--color-danger-fg);
-  }
-}
-
-.flash-success:not(.Banner) {
-  color: var(--color-fg-default);
-  background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
-  border-color: var(--color-success-muted);
-
-  .octicon {
-    color: var(--color-success-fg);
-  }
-}
-
-//
-// Layout variations
-//
-
-.flash-full:not(.Banner) {
-  // stylelint-disable-next-line primer/spacing
-  margin-top: -1px;
-  border-width: $border-width 0;
-  border-radius: 0;
-}
-
-// A banner rendered at the top of the page.
-.flash-banner {
-  position: fixed;
-  top: 0;
-  z-index: 90;
-  width: 100%;
-  border-top: 0;
-  border-right: 0;
-  border-left: 0;
-  border-radius: 0;
-}
-
-// Makes sure the background is opaque to cover any content underneath
-.flash-full,
-.flash-banner {
-  background-color: var(--color-canvas-default);
-}
-
-// FIXME deprecate this
-.warning {
-  padding: $em-spacer-5;
-  // stylelint-disable-next-line primer/spacing
-  margin-bottom: 0.8em;
-  font-weight: $font-weight-bold;
-  background-color: var(--color-attention-subtle);
-}
+@import '@primer/view-components/app/components/primer/beta/flash';

package/autocomplete/autocomplete.scss

@@ -1,118 +1 @@
-// 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;
-  margin-bottom: $spacer-2 * 0.75;
-}
-
-// Inline label (non-default)
-.autocomplete-label-inline {
-  display: inline;
-  margin-right: $spacer-2 * 0.75;
-}
-
-// Switch to stacked at smaller viewport
-@media (max-width: $width-sm) {
-  .autocomplete-label-inline {
-    display: block;
-    margin-bottom: $spacer-2 * 0.75;
-  }
-}
-
-// Wrapper for the input and result elements to ensure alignment
-.autocomplete-body {
-  position: relative;
-  display: inline;
-}
-
-// Wrapper and conditional styles for when an icon is added
-.autocomplete-embedded-icon-wrap {
-  display: inline-flex;
-  padding: $spacer-1 $spacer-2;
-  align-items: center;
-
-  &:focus-within {
-    border-color: var(--color-accent-fg);
-
-    @include focusBoxShadowInset;
-  }
-
-  .form-control {
-    padding: 0;
-    margin-left: $spacer-2;
-    // stylelint-disable-next-line
-    border: none;
-    box-shadow: none;
-
-    &:focus {
-      box-shadow: none;
-    }
-
-    &:focus-visible {
-      box-shadow: none;
-    }
-  }
-}
-
-// A pop up list of items used to show autocompleted results
-.autocomplete-results {
-  position: absolute;
-  left: 0;
-  z-index: 99;
-  width: max-content;
-  min-width: 100%;
-  max-height: 20em;
-  overflow-y: auto;
-  // stylelint-disable-next-line primer/typography
-  font-size: 13px;
-  list-style: none;
-  background: var(--color-canvas-overlay);
-  border: $border-width $border-style var(--color-border-default);
-  border-radius: $border-radius;
-  box-shadow: var(--color-shadow-medium);
-}
-
-// One of the items that appears within an autocomplete group
-// Bold black text on white background
-
-.autocomplete-item {
-  display: block;
-  width: 100%;
-  padding: $spacer-1 $spacer-2;
-  overflow: hidden;
-  font-weight: $font-weight-bold;
-  color: var(--color-fg-default);
-  text-align: left;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-  background-color: var(--color-canvas-overlay);
-  border: 0;
-
-  &:hover {
-    color: var(--color-fg-on-emphasis);
-    text-decoration: none;
-    background-color: var(--color-accent-emphasis);
-
-    // Inherit color on all child elements to ensure enough contrast
-    * {
-      color: inherit !important;
-    }
-  }
-
-  &.selected,
-  &[aria-selected='true'],
-  &.navigation-focus {
-    color: var(--color-fg-on-emphasis);
-    text-decoration: none;
-    background-color: var(--color-accent-emphasis);
-
-    // Inherit color on all child elements to ensure enough contrast
-    * {
-      color: inherit !important;
-    }
-  }
-}
+@import '@primer/view-components/app/components/primer/alpha/auto_complete';

package/avatars/avatar-stack.scss

@@ -1,149 +1 @@
-// Stacked avatars can be used to show who is participating in thread when
-// there is limited space available.
-
-.AvatarStack {
-  position: relative;
-  min-width: 26px;
-  height: 20px;
-
-  .AvatarStack-body {
-    position: absolute;
-  }
-
-  &.AvatarStack--two {
-    min-width: 36px;
-  }
-
-  &.AvatarStack--three-plus {
-    min-width: 46px;
-  }
-}
-
-.AvatarStack-body {
-  display: flex;
-  background: var(--color-canvas-default);
-  // stylelint-disable-next-line primer/borders
-  border-radius: 100px;
-
-  .avatar {
-    position: relative;
-    z-index: 2;
-    display: flex;
-    width: 20px;
-    height: 20px;
-    box-sizing: content-box;
-    // stylelint-disable-next-line primer/spacing
-    margin-right: -11px;
-    background-color: var(--color-canvas-default);
-    border-right: $border-width $border-style var(--color-canvas-default);
-    // stylelint-disable-next-line primer/borders
-    border-radius: $border-radius-1;
-    box-shadow: none;
-    transition: margin 0.1s ease-in-out;
-
-    &:first-child {
-      z-index: 3;
-    }
-
-    &:last-child {
-      z-index: 1;
-      border-right: 0;
-    }
-
-    // stylelint-disable selector-max-type
-    img {
-      // stylelint-disable-next-line primer/borders
-      border-radius: $border-radius-1;
-    }
-    // stylelint-enable selector-max-type
-
-    // Account for 4+ avatars
-    &:nth-child(n + 4) {
-      display: none;
-      opacity: 0;
-    }
-  }
-
-  &:hover {
-    .avatar {
-      // stylelint-disable-next-line primer/spacing
-      margin-right: 3px;
-    }
-
-    .avatar:nth-child(n + 4) {
-      display: flex;
-      opacity: 1;
-    }
-
-    .avatar-more {
-      display: none !important;
-    }
-  }
-}
-
-.avatar.avatar-more {
-  z-index: 1;
-  margin-right: 0;
-  background: var(--color-canvas-subtle);
-
-  &::before,
-  &::after {
-    position: absolute;
-    display: block;
-    height: 20px;
-    content: '';
-    // stylelint-disable-next-line primer/borders
-    border-radius: 2px;
-    outline: $border-width $border-style var(--color-canvas-default);
-  }
-
-  &::before {
-    width: 17px;
-    background: var(--color-avatar-stack-fade-more);
-  }
-
-  &::after {
-    width: 14px;
-    background: var(--color-avatar-stack-fade);
-  }
-}
-
-// Right aligned variation
-
-.AvatarStack--right {
-  .AvatarStack-body {
-    right: 0;
-    flex-direction: row-reverse;
-
-    &:hover .avatar {
-      margin-right: 0;
-      // stylelint-disable-next-line primer/spacing
-      margin-left: 3px;
-    }
-
-    .avatar:not(:last-child) {
-      border-left: 0;
-    }
-  }
-
-  .avatar.avatar-more {
-    background: var(--color-avatar-stack-fade);
-
-    &::before {
-      width: 5px;
-    }
-
-    &::after {
-      width: 2px;
-      background: var(--color-canvas-subtle);
-    }
-  }
-
-  .avatar {
-    margin-right: 0;
-    // stylelint-disable-next-line primer/spacing
-    margin-left: -11px;
-    border-right: 0;
-    border-left: $border-width $border-style var(--color-canvas-default);
-  }
-}
+@import '@primer/view-components/app/components/primer/beta/avatar_stack';

package/avatars/avatar.scss

@@ -1,48 +1 @@
-.avatar {
-  display: inline-block;
-  overflow: hidden; // Ensure page layout in Firefox should images fail to load
-  line-height: $lh-condensed-ultra;
-  vertical-align: middle;
-  background-color: var(--color-avatar-bg); // adds opaque bg to transparent avatars
-  border-radius: $border-radius;
-  flex-shrink: 0;
-  // stylelint-disable-next-line primer/box-shadow
-  box-shadow: 0 0 0 1px var(--color-avatar-border);
-}
-
-.avatar-link {
-  float: left;
-  line-height: $lh-condensed-ultra;
-}
-
-// User for example on /stars and /user for grids of avatars
-.avatar-group-item {
-  display: inline-block;
-  // stylelint-disable-next-line primer/spacing
-  margin-bottom: 3px;
-}
-
-// Border radius
-
-.avatar-1,
-.avatar-2,
-.avatar-small {
-  // stylelint-disable-next-line primer/borders
-  border-radius: $border-radius-1;
-}
-
-// Sizes
-
-@mixin avatar-size( $size ) {
-  width: $size;
-  height: $size;
-}
-
-.avatar-1 { @include avatar-size( $size-1 ); }
-.avatar-2 { @include avatar-size( $size-2 ); }
-.avatar-3 { @include avatar-size( $size-3 ); }
-.avatar-4 { @include avatar-size( $size-4 ); }
-.avatar-5 { @include avatar-size( $size-5 ); }
-.avatar-6 { @include avatar-size( $size-6 ); }
-.avatar-7 { @include avatar-size( $size-7 ); }
-.avatar-8 { @include avatar-size( $size-8 ); }
+@import '@primer/view-components/app/components/primer/beta/avatar';

package/base/base.scss

@@ -34,6 +34,22 @@ strong {
   font-weight: $font-weight-bold;
 }
 
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+label {
+  font-weight: $font-weight-bold;
+}
+
+// Custom styling for HTML5 validation bubbles (WebKit only)
+::placeholder {
+  color: var(--color-fg-subtle);
+  opacity: 1; // override opacity in normalize.css
+}
+
 // Horizontal lines
 //
 // TODO-MDO: Remove `.rule` from everywhere and replace with `<hr>`s

package/blankslate/blankslate.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/beta/blankslate';

package/blankslate/index.scss

@@ -1 +1,2 @@
-@import '@primer/view-components/app/components/primer/beta/blankslate';
+@import '../support/index.scss';
+@import './blankslate.scss';