@primer/css 20.0.0-rc.f7fbc78b → 20.1.0-rc.c155977b

package/markdown/headings.scss

@@ -80,6 +80,11 @@
     h5,
     h6 {
       display: inline-block;
+
+      .anchor {
+        // stylelint-disable-next-line primer/spacing
+        margin-left: -40px;
+      }
     }
 
     h1,

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.f7fbc78b",
+  "version": "20.1.0-rc.c155977b",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -49,12 +49,12 @@
     "@github/prettier-config": "0.0.4",
     "@koddsson/postcss-sass": "5.0.1",
     "@primer/stylelint-config": "^12.4.0",
-    "autoprefixer": "10.4.4",
+    "autoprefixer": "10.4.6",
     "chokidar-cli": "3.0.0",
     "cssstats": "4.0.5",
-    "eslint": "8.13.0",
+    "eslint": "8.14.0",
     "eslint-plugin-github": "4.3.6",
-    "eslint-plugin-jest": "26.0.0",
+    "eslint-plugin-jest": "26.1.5",
     "eslint-plugin-prettier": "4.0.0",
     "filesize": "8.0.7",
     "front-matter": "4.0.2",
@@ -62,11 +62,11 @@
     "globby": "13.1.1",
     "jest": "27.5.1",
     "js-yaml": "4.1.0",
-    "postcss": "8.4.12",
+    "postcss": "8.4.13",
     "postcss-calc": "8.2.4",
     "postcss-import": "14.1.0",
     "postcss-load-config": "3.1.4",
-    "postcss-scss": "4.0.3",
+    "postcss-scss": "4.0.4",
     "postcss-simple-vars": "6.0.3",
     "prettier": "2.6.2",
     "semver": "7.3.7",

package/utilities/typography.scss

@@ -243,3 +243,8 @@
 .user-select-none {
   user-select: none !important;
 }
+
+/* Make text capitalized (transforms first character to uppercase) */
+.text-capitalize {
+  text-transform: capitalize !important;
+}