@primer/css 20.0.0-rc.e6f567ec → 20.0.0

package/navigation/underline-nav.scss

@@ -1,4 +1,3 @@
-// stylelint-disable selector-max-specificity
 $nav-height: $spacer-3 * 3 !default; // 48px
 
 .UnderlineNav {
@@ -10,6 +9,17 @@ $nav-height: $spacer-3 * 3 !default; // 48px
   box-shadow: inset 0 -1px 0 var(--color-border-muted);
   -webkit-overflow-scrolling: auto;
   justify-content: space-between;
+
+  .Counter {
+    margin-left: $spacer-2;
+    color: var(--color-fg-default);
+    background-color: var(--color-neutral-muted);
+
+    &--primary {
+      color: var(--color-fg-on-emphasis);
+      background-color: var(--color-neutral-emphasis);
+    }
+  }
 }
 
 .UnderlineNav-body {
@@ -41,65 +51,54 @@ $nav-height: $spacer-3 * 3 !default; // 48px
     color: var(--color-fg-default);
     text-decoration: none;
     border-bottom-color: var(--color-neutral-muted);
-    outline-offset: -8px;
+    outline-offset: -2px;
     transition: border-bottom-color 0.12s ease-out;
+  }
 
-    // renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected
-    [data-content]::before {
-      display: block;
-      height: 0;
-      font-weight: $font-weight-bold;
-      visibility: hidden;
-      content: attr(data-content);
-    }
-
-    // increase touch target area
-    &::before {
-      @include minTouchTarget($min-height: $nav-height);
-    }
+  // renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected
+  [data-content]::before {
+    display: block;
+    height: 0;
+    font-weight: $font-weight-bold;
+    visibility: hidden;
+    content: attr(data-content);
+  }
 
-    // hover state was "sticking" on mobile after click
-    @media (pointer: fine) {
-      &:hover {
-        color: var(--color-fg-default);
-        text-decoration: none;
-        background: var(--color-action-list-item-default-hover-bg);
-        transition: background 0.12s ease-out;
-      }
-    }
+  // increase touch target area
+  &::before {
+    @include minTouchTarget($min-height: $nav-height);
+  }
 
-    &.selected,
-    &[role='tab'][aria-selected='true'],
-    &[aria-current]:not([aria-current='false']) {
-      font-weight: $font-weight-bold;
+  // hover state was "sticking" on mobile after click
+  @media (pointer: fine) {
+    &:hover {
       color: var(--color-fg-default);
-      border-bottom-color: var(--color-primer-border-active);
-      outline-offset: -8px;
-
-      // current/selected underline
-      &::after {
-        position: absolute;
-        right: 50%;
-        // 48px total height / 2 (24px) + 1px
-        bottom: calc(50% - 25px);
-        width: 100%;
-        height: 2px;
-        content: '';
-        background: var(--color-primer-border-active);
-        border-radius: $border-radius;
-        transform: translate(50%, -50%);
-      }
+      text-decoration: none;
+      background: var(--color-action-list-item-default-hover-bg);
+      transition: background 0.12s ease-out;
     }
   }
 
-  .Counter {
-    margin-left: $spacer-2;
+  &.selected,
+  &[role='tab'][aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    font-weight: $font-weight-bold;
     color: var(--color-fg-default);
-    background-color: var(--color-neutral-muted);
+    border-bottom-color: var(--color-primer-border-active);
+    outline-offset: -8px;
 
-    &--primary {
-      color: var(--color-fg-on-emphasis);
-      background-color: var(--color-neutral-emphasis);
+    // current/selected underline
+    &::after {
+      position: absolute;
+      right: 50%;
+      // 48px total height / 2 (24px) + 1px
+      bottom: calc(50% - 25px);
+      width: 100%;
+      height: 2px;
+      content: '';
+      background: var(--color-primer-border-active);
+      border-radius: $border-radius;
+      transform: translate(50%, -50%);
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "20.0.0-rc.e6f567ec",
+  "version": "20.0.0",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -48,7 +48,7 @@
     "@changesets/cli": "2.22.0",
     "@github/prettier-config": "0.0.4",
     "@koddsson/postcss-sass": "5.0.1",
-    "@primer/stylelint-config": "^12.3.3",
+    "@primer/stylelint-config": "^12.4.0",
     "autoprefixer": "10.4.4",
     "chokidar-cli": "3.0.0",
     "cssstats": "4.0.5",

package/popover/popover.scss

@@ -122,6 +122,7 @@
   }
 
   &::before {
+    // stylelint-disable-next-line function-no-unknown
     margin-top: -($spacer-2 + 1);
   }
 

package/support/mixins/color-modes.scss

@@ -84,10 +84,12 @@
   @each $name, $value in $color-map {
     @each $type, $color in $value {
       @if $type == dark {
+        // stylelint-disable-next-line function-no-unknown
         $dark-colors: append($dark-colors, (--color-#{$name}, #{$color}));
       }
 
       @else {
+        // stylelint-disable-next-line function-no-unknown
         $light-colors: append($light-colors, (--color-#{$name}, #{$color}));
       }
     }

package/support/mixins/layout.scss

@@ -7,6 +7,7 @@
 
   @else {
     // Retrieves the value from the key
+    // stylelint-disable-next-line function-no-unknown
     $value: map-get($breakpoints, $breakpoint);
 
     // If the key exists in the map

package/support/variables/layout.scss

@@ -82,6 +82,7 @@ $spacers-large: (
   12: $spacer-12,
 ) !default;
 
+// stylelint-disable-next-line function-no-unknown
 $spacer-map-extended: map-merge(
   (
     0: 0,

package/timeline/timeline-item.scss

@@ -57,6 +57,7 @@
 
 .TimelineItem-avatar {
   position: absolute;
+  // stylelint-disable-next-line function-no-unknown
   left: -($spacer-6 + $spacer-5);
   z-index: 1;
 }
@@ -67,6 +68,7 @@
   height: $spacer-4;
   margin: 0;
   margin-bottom: -$spacer-3;
+  // stylelint-disable-next-line function-no-unknown
   margin-left: -($spacer-6 + $spacer-3);
   background-color: var(--color-canvas-default);
   border: 0;