@primer/css 0.0.0-20220209190837 → 0.0.0-20220211133203

package/CHANGELOG.md

@@ -1,18 +1,34 @@
 # @primer/css
 
-## 0.0.0-20220209190837
+## 0.0.0-20220211133203
+
+### Patch Changes
+
+- Fake entry to force publishing
+
+* [#1928](https://github.com/primer/css/pull/1928) [`0fb67895`](https://github.com/primer/css/commit/0fb6789555652860cfa5178b60433eb2c3d2575c) Thanks [@simurai](https://github.com/simurai)! - Fix `<sup><a>` from getting wrapped with `[ ]`
+
+## 19.3.0
+
+### Minor Changes
+
+- [#1876](https://github.com/primer/css/pull/1876) [`bcf447ab`](https://github.com/primer/css/commit/bcf447ab226e6043dd47c1fcc395ba104af866d4) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Add mono font stack to <samp> tag
+
+* [#1919](https://github.com/primer/css/pull/1919) [`21085f5c`](https://github.com/primer/css/commit/21085f5c6cc538b5014a47de76642554a4291cc6) Thanks [@hectahertz](https://github.com/hectahertz)! - Add blankslate classes to replace utilities
 
 ### Patch Changes
 
 - [#1892](https://github.com/primer/css/pull/1892) [`55bd498b`](https://github.com/primer/css/commit/55bd498b7357e86659ac574f0f745f7b420fb6d3) Thanks [@langermank](https://github.com/langermank)! - Patch: Fix ActionList--divided for label with inline description scenarios
 
-* Fake entry to force publishing
+* [#1906](https://github.com/primer/css/pull/1906) [`f02d9a3e`](https://github.com/primer/css/commit/f02d9a3e4e86c2659a9f507995bcb90c5226e34e) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrading @primer/stylelint-config@12.3.0 and fixing violations
+
+- [#1908](https://github.com/primer/css/pull/1908) [`84581e96`](https://github.com/primer/css/commit/84581e96aee50ff3883907dfe1069701edd1c24a) Thanks [@simurai](https://github.com/simurai)! - Reduce size of `Label--inline`
 
-- [#1890](https://github.com/primer/css/pull/1890) [`74d0438b`](https://github.com/primer/css/commit/74d0438bd4dbaed447b553c5d3c8b945da282836) Thanks [@andrialexandrou](https://github.com/andrialexandrou)! - Adds --color-accent-emphasis and --color-fg-on-emphasis rules for Windows High Contrast Mode
+* [#1890](https://github.com/primer/css/pull/1890) [`74d0438b`](https://github.com/primer/css/commit/74d0438bd4dbaed447b553c5d3c8b945da282836) Thanks [@andrialexandrou](https://github.com/andrialexandrou)! - Adds --color-accent-emphasis and --color-fg-on-emphasis rules for Windows High Contrast Mode
 
-* [#1882](https://github.com/primer/css/pull/1882) [`4a06aba1`](https://github.com/primer/css/commit/4a06aba1d3f80bcc228ff4360d0e02d5ace158ff) Thanks [@tqwewe](https://github.com/tqwewe)! - Fix layout gutter none styles
+- [#1882](https://github.com/primer/css/pull/1882) [`4a06aba1`](https://github.com/primer/css/commit/4a06aba1d3f80bcc228ff4360d0e02d5ace158ff) Thanks [@tqwewe](https://github.com/tqwewe)! - Fix layout gutter none styles
 
-- [#1894](https://github.com/primer/css/pull/1894) [`d1adf595`](https://github.com/primer/css/commit/d1adf595308afb97f83c5ca172222944189a5961) Thanks [@simurai](https://github.com/simurai)! - Make `pagination` responsive by default
+* [#1894](https://github.com/primer/css/pull/1894) [`d1adf595`](https://github.com/primer/css/commit/d1adf595308afb97f83c5ca172222944189a5961) Thanks [@simurai](https://github.com/simurai)! - Make `pagination` responsive by default
 
 ## 19.2.0
 

package/actionlist/action-list-item-divider.scss

@@ -4,7 +4,6 @@
   // has children
   &:not(:empty) {
     display: flex;
-    // stylelint-disable-next-line primer/spacing
     padding: ($spacer-1 * 1.5) $spacer-2;
     font-size: $font-size-small;
     font-weight: $font-weight-bold;
@@ -14,21 +13,13 @@
 
   // no children
   &:empty {
-    display: block;
     height: 1px;
     padding: 0;
-    // stylelint-disable-next-line primer/spacing
     margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
     list-style: none;
     background: var(--color-action-list-item-inline-divider);
     border: 0;
   }
-
-  .ActionList-sectionDivider-title {
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
-    color: var(--color-fg-muted);
-  }
 }
 
 .ActionList-sectionDivider--filled {

package/actionlist/action-list-item.scss

@@ -24,10 +24,17 @@
   list-style: none;
   background-color: transparent;
   border-radius: $border-radius;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
 
   &:hover,
   &:active {
     cursor: pointer;
+
+    // a href
+    .ActionList-content {
+      text-decoration: none;
+    }
   }
 
   // only hover li without list as children
@@ -150,6 +157,98 @@
     }
   }
 
+  // collapsible item [aria-expanded]
+
+  // nesting (single level)
+  // target items inside expanded subgroups
+  &[aria-expanded] {
+    .ActionList--subGroup {
+      @media screen and (prefers-reduced-motion: no-preference) {
+        transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
+      }
+
+      .ActionList-content {
+        padding-left: $spacer-4;
+      }
+    }
+
+    // has 16px leading visual
+    .ActionList-content--visual16 + .ActionList--subGroup {
+      .ActionList-content {
+        padding-left: $spacer-5;
+      }
+    }
+
+    // has 20px leading visual
+    .ActionList-content--visual20 + .ActionList--subGroup {
+      .ActionList-content {
+        padding-left: $spacer-2 * 4.5; // 36px
+      }
+    }
+
+    // has 24px leading visual
+    .ActionList-content--visual24 + .ActionList--subGroup {
+      .ActionList-content {
+        padding-left: $spacer-6;
+      }
+    }
+  }
+
+  &[aria-expanded='true'] {
+    .ActionList-item-collapseIcon {
+      transition: transform 120ms linear;
+      transform: scaleY(-1);
+    }
+
+    .ActionList--subGroup {
+      height: auto;
+      overflow: visible;
+      visibility: visible;
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    &.ActionList-item--hasActiveSubItem {
+      > .ActionList-content > .ActionList-item-label {
+        font-weight: $font-weight-bold;
+      }
+    }
+  }
+
+  &[aria-expanded='false'] {
+    .ActionList-item-collapseIcon {
+      transition: transform 120ms linear;
+      transform: scaleY(1);
+    }
+
+    .ActionList--subGroup {
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+      opacity: 0;
+      transform: translateY(-$spacer-3);
+    }
+
+    // show active indicator on parent collapse if child is active
+    &.ActionList-item--hasActiveSubItem {
+      background: var(--color-action-list-item-default-selected-bg);
+
+      .ActionList-item-label {
+        font-weight: $font-weight-bold;
+      }
+
+      &::before,
+      + .ActionList-item::before {
+        visibility: hidden;
+      }
+
+      // blue accent line
+      &::after {
+        @include activeIndicatorLine;
+      }
+    }
+  }
+
   // checkbox item [aria-checked]
   // listbox [aria-selected]
 
@@ -264,40 +363,48 @@
       }
     }
 
-    .ActionList-content {
-      &:active {
-        background: var(--color-action-list-item-danger-active-bg);
+    &:active {
+      background: var(--color-action-list-item-danger-active-bg);
+    }
+  }
+
+  // disabled
+  &[aria-disabled='true'] {
+    .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;
       }
     }
   }
 
   // if nested list exists, remove default padding
   .ActionList {
-    // stylelint-disable-next-line primer/spacing
     padding: unset;
   }
 }
 
-// button or a href
+// span or a href
 .ActionList-content {
   position: relative;
   display: grid;
-  width: 100%;
-  // stylelint-disable-next-line primer/spacing
   padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
   font-size: $body-font-size;
   font-weight: $font-weight-normal;
   color: var(--color-fg-default);
-  text-align: left;
   user-select: none;
-  background-color: transparent;
-  // stylelint-disable-next-line declaration-property-value-disallowed-list
-  border: none;
+  touch-action: manipulation;
   border-radius: $border-radius;
   transition: $actionList-item-bg-transition;
-  touch-action: manipulation;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
   grid-template-rows: min-content;
   grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction';
   grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
@@ -308,138 +415,19 @@
     margin-right: $spacer-2;
   }
 
-  // state
-
-  &:hover {
-    text-decoration: none;
-  }
-
   &:focus-visible {
     @include focusOutline;
   }
 
-  // disabled
-  &[aria-disabled='true'] {
-    .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;
-      }
-    }
-  }
-
-  // collapsible item [aria-expanded]
-
-  // nesting (single level)
-  // target items inside expanded subgroups
-  &[aria-expanded] {
-    + .ActionList--subGroup {
-      @media screen and (prefers-reduced-motion: no-preference) {
-        transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
-      }
-
-      .ActionList-content {
-        padding-left: $spacer-4;
-      }
-    }
-
-    // has 16px leading visual
-    &.ActionList-content--visual16 + .ActionList--subGroup {
-      .ActionList-content {
-        padding-left: $spacer-5;
-      }
-    }
-
-    // has 20px leading visual
-    &.ActionList-content--visual20 + .ActionList--subGroup {
-      .ActionList-content {
-        padding-left: $spacer-2 * 4.5; // 36px
-      }
-    }
-
-    // has 24px leading visual
-    &.ActionList-content--visual24 + .ActionList--subGroup {
-      .ActionList-content {
-        padding-left: $spacer-6;
-      }
-    }
-  }
-
-  &[aria-expanded='true'] {
-    .ActionList-item-collapseIcon {
-      transition: transform 120ms linear;
-      transform: scaleY(-1);
-    }
-
-    + .ActionList--subGroup {
-      height: auto;
-      overflow: visible;
-      visibility: visible;
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    &.ActionList-content--hasActiveSubItem {
-      > .ActionList-item-label {
-        font-weight: $font-weight-bold;
-      }
-    }
-  }
-
-  &[aria-expanded='false'] {
-    .ActionList-item-collapseIcon {
-      transition: transform 120ms linear;
-      transform: scaleY(1);
-    }
-
-    + .ActionList--subGroup {
-      height: 0;
-      overflow: hidden;
-      visibility: hidden;
-      opacity: 0;
-      transform: translateY(-$spacer-3);
-    }
-
-    // show active indicator on parent collapse if child is active
-    &.ActionList-content--hasActiveSubItem {
-      background: var(--color-action-list-item-default-selected-bg);
-
-      .ActionList-item-label {
-        font-weight: $font-weight-bold;
-      }
-
-      &::before,
-      + .ActionList-item::before {
-        visibility: hidden;
-      }
-
-      // blue accent line
-      &::after {
-        @include activeIndicatorLine;
-      }
-    }
-  }
-
   // sizes
 
   &.ActionList-content--sizeMedium {
     // 44px total height
-    // stylelint-disable-next-line primer/spacing
     padding: $actionList-item-padding-vertical-md $actionList-item-padding-horizontal;
   }
 
   &.ActionList-content--sizeLarge {
     // 48px total height
-    // stylelint-disable-next-line primer/spacing
     padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
   }
 
@@ -449,7 +437,6 @@
 
   // On pointer:coarse (mobile), all list items are large
   @media (pointer: coarse) {
-    // stylelint-disable-next-line primer/spacing
     padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
   }
 
@@ -506,7 +493,6 @@
   align-items: baseline;
 
   .ActionList-item-description {
-    // stylelint-disable-next-line primer/spacing
     margin-left: $actionList-item-padding-horizontal;
   }
 }

package/actionlist/action-list-tree.scss

@@ -1,21 +1,9 @@
-// stylelint-disable max-nesting-depth, selector-max-compound-selectors, selector-max-specificity, no-duplicate-selectors, selector-max-type
 // tree-view variant
 // renders ActionList with default styling for tree-view
 // collapse/expand icons presents as leadingActions, rotate 90deg
 // connecting vertical lines between collapse groups
 // consistent font-size between nested groups
 
-@mixin activeIndicatorLine {
-  position: absolute;
-  top: calc(50% - 12px);
-  left: -$actionList-item-padding-horizontal;
-  width: $spacer-1;
-  height: $spacer-4;
-  content: '';
-  background: var(--color-accent-fg);
-  border-radius: $border-radius;
-}
-
 @mixin treeConnectingLine($left) {
   position: absolute;
   left: $left;
@@ -33,97 +21,6 @@
   }
 
   .ActionList-item {
-    // start: copy from ActionList proper- backwards compatible for treeview with different markup structure
-    &[aria-expanded] {
-      .ActionList--subGroup {
-        @media screen and (prefers-reduced-motion: no-preference) {
-          transition: opacity 160ms cubic-bezier(0.25, 1, 0.5, 1), transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
-        }
-
-        .ActionList-content {
-          padding-left: $spacer-4;
-        }
-      }
-
-      // has 16px leading visual
-      .ActionList-content--visual16 + .ActionList--subGroup {
-        .ActionList-content {
-          padding-left: $spacer-5;
-        }
-      }
-
-      // has 20px leading visual
-      .ActionList-content--visual20 + .ActionList--subGroup {
-        .ActionList-content {
-          padding-left: $spacer-2 * 4.5; // 36px
-        }
-      }
-
-      // has 24px leading visual
-      .ActionList-content--visual24 + .ActionList--subGroup {
-        .ActionList-content {
-          padding-left: $spacer-6;
-        }
-      }
-    }
-
-    &[aria-expanded='true'] {
-      .ActionList-item-collapseIcon {
-        transition: transform 120ms linear;
-        transform: scaleY(-1);
-      }
-
-      .ActionList--subGroup {
-        height: auto;
-        overflow: visible;
-        visibility: visible;
-        opacity: 1;
-        transform: translateY(0);
-      }
-
-      &.ActionList-item--hasActiveSubItem {
-        > .ActionList-content > .ActionList-item-label {
-          font-weight: $font-weight-bold;
-        }
-      }
-    }
-
-    &[aria-expanded='false'] {
-      .ActionList-item-collapseIcon {
-        transition: transform 120ms linear;
-        transform: scaleY(1);
-      }
-
-      .ActionList--subGroup {
-        height: 0;
-        overflow: hidden;
-        visibility: hidden;
-        opacity: 0;
-        transform: translateY(-$spacer-3);
-      }
-
-      // show active indicator on parent collapse if child is active
-      // this class has changed in non tree ActionList. Leaving for now until we hear about their a11y audit (if markup needs to change)
-      &.ActionList-item--hasActiveSubItem {
-        background: var(--color-action-list-item-default-selected-bg);
-
-        .ActionList-item-label {
-          font-weight: $font-weight-bold;
-        }
-
-        &::before,
-        + .ActionList-item::before {
-          visibility: hidden;
-        }
-
-        // blue accent line
-        &::after {
-          @include activeIndicatorLine;
-        }
-      }
-    }
-    // end copy
-
     // nesting (infinate levels)
     // target items inside expanded subgroup
     &[aria-expanded] {
@@ -131,8 +28,8 @@
         position: relative;
 
         // --ActionList-tree-depth is defined as an inline style referencing the aria-level of each item ie: aria-level="2"
+        // stylelint-disable-next-line selector-max-specificity, max-nesting-depth, selector-max-compound-selectors
         .ActionList-content {
-          // stylelint-disable-next-line primer/spacing
           padding-left: calc(#{$spacer-2} * var(--ActionList-tree-depth));
         }
       }
@@ -157,9 +54,11 @@
   // expand/collapse group
   .ActionList-item--hasSubItem {
     .ActionList-item--subItem:not(.ActionList-item--hasSubItem) {
+      // stylelint-disable-next-line selector-max-specificity, selector-max-compound-selectors
       .ActionList-content {
         // increase child padding by targeting content first child span (add to ActionList-content padding, not replace)
         // creates a slight indent of child items
+        // stylelint-disable-next-line selector-max-specificity, selector-max-type, max-nesting-depth, selector-max-compound-selectors
         > span:first-child {
           padding-left: $spacer-4;
         }
@@ -170,6 +69,7 @@
   // first subitem
   > [aria-level='1'].ActionList-item--hasSubItem {
     > .ActionList--subGroup {
+      // stylelint-disable-next-line selector-max-specificity
       &::before {
         @include treeConnectingLine($left: $spacer-3);
       }
@@ -180,6 +80,7 @@
   // center connecting line with parent (line is 1px (8px - 1px)
   .ActionList-item--hasSubItem:not([aria-level='1']) {
     > .ActionList--subGroup {
+      // stylelint-disable-next-line selector-max-specificity
       &::before {
         @include treeConnectingLine(
           $left: calc(#{$spacer-2} * (var(--ActionList-tree-depth)) + #{$spacer-2 - $border-width})

package/actionlist/action-list.scss

@@ -8,11 +8,6 @@
   padding: 0;
 }
 
-// nested list within main ActionList
-.ActionList--subGroup {
-  padding: 0;
-}
-
 // dividers
 
 .ActionList--divided {

package/base/kbd.scss

@@ -3,7 +3,6 @@
 
 kbd {
   display: inline-block;
-  // stylelint-disable-next-line primer/spacing
   padding: ($spacer-1 - 1) ($spacer-1 + 1);
   font: 11px $mono-font;
   // stylelint-disable-next-line primer/typography

package/base/normalize.scss

@@ -225,7 +225,7 @@ code,
 kbd,
 pre,
 samp {
-  font-family: monospace, monospace; /* 1 */
+  font-family: monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 

package/base/typography-base.scss

@@ -62,11 +62,12 @@ dd {
   margin-left: 0;
 }
 
-// Code
+// Monospaced
 // --------------------------------------------------
 
 tt,
-code {
+code,
+samp {
   font-family: $mono-font;
   font-size: $font-size-small;
 }

package/blankslate/blankslate.scss

@@ -30,12 +30,31 @@
   color: var(--color-fg-muted);
 }
 
+.blankslate-image {
+  margin-bottom: $spacer-3;
+}
+
+.blankslate-heading {
+  margin-bottom: $spacer-1;
+}
+
+.blankslate-action {
+  margin-top: $spacer-3;
+
+  &:first-of-type {
+    margin-top: $spacer-4;
+  }
+
+  &:last-of-type {
+    margin-bottom: $spacer-2;
+  }
+}
+
 .blankslate-capped {
   border-radius: 0 0 $border-radius $border-radius;
 }
 
 .blankslate-spacious {
-  // stylelint-disable-next-line primer/spacing
   padding: ($spacer-6 * 2) $spacer-6;
 }
 

package/box/box.scss

@@ -28,7 +28,6 @@
   .Box-btn-octicon {
     &.btn-octicon {
       padding: $spacer-2 $spacer-3;
-      // stylelint-disable-next-line primer/spacing
       margin: (-$spacer-2) (-$spacer-3);
       line-height: $lh-condensed;
     }
@@ -60,7 +59,6 @@
   .Box-btn-octicon {
     &.btn-octicon {
       padding: $spacer-4;
-      // stylelint-disable-next-line primer/spacing
       margin: (-$spacer-4) (-$spacer-4);
     }
   }
@@ -285,7 +283,6 @@
   // Increase specificity when btn-octicon is used because comes after .Box in the cascade
   &.btn-octicon {
     padding: $spacer-3 $spacer-3;
-    // stylelint-disable-next-line primer/spacing
     margin: (-$spacer-3) (-$spacer-3);
     line-height: $lh-default; // override btn-octicon line-height
   }

package/buttons/button.scss

@@ -294,6 +294,7 @@
 
 // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
 .btn-large {
+  // stylelint-disable-next-line primer/spacing
   padding: $em-spacer-6 1.5em;
   font-size: inherit;
   line-height: $lh-default;