@primer/css 19.4.1-rc.e35320ba → 19.5.0-rc.2b8c3990

package/labels/states.scss

@@ -28,7 +28,7 @@
 
 .State--open {
   color: var(--color-fg-on-emphasis);
-  background-color: var(--color-success-emphasis);
+  background-color: var(--color-open-emphasis);
 }
 
 .State--merged {
@@ -38,7 +38,7 @@
 
 .State--closed {
   color: var(--color-fg-on-emphasis);
-  background-color: var(--color-danger-emphasis);
+  background-color: var(--color-closed-emphasis);
 }
 
 // Small

package/layout/page-layout.scss

@@ -23,6 +23,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 }
 
 .PageLayout {
+  display: block;
   // stylelint-disable-next-line primer/spacing
   margin: var(--Layout-outer-spacing-y) var(--Layout-outer-spacing-x);
 
@@ -245,6 +246,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
     .PageLayout-region--dividerNarrow-filled-before {
       position: relative;
+      // stylelint-disable-next-line primer/spacing
       margin-top: calc(#{$spacer-2} + var(--Layout-row-gap));
 
       &::after {
@@ -256,6 +258,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
     .PageLayout-region--dividerNarrow-filled-after {
       position: relative;
+      // stylelint-disable-next-line primer/spacing
       margin-bottom: calc(#{$spacer-2} + var(--Layout-row-gap));
 
       &::before {

package/markdown/headings.scss

@@ -71,4 +71,21 @@
     font-size: 0.85em;
     color: var(--color-fg-muted);
   }
+
+  summary {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      display: inline-block;
+    }
+
+    h1,
+    h2 {
+      padding-bottom: 0;
+      border-bottom: 0;
+    }
+  }
 }

package/marketing/utilities/layout.scss

@@ -27,6 +27,7 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     @for $offset from 1 through 7 {
+      // stylelint-disable-next-line primer/spacing
       .offset#{$variant}-n#{$offset} { margin-left: -($offset * 0.0833333333 * 100%); }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "19.4.1-rc.e35320ba",
+  "version": "19.5.0-rc.2b8c3990",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -39,18 +39,18 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.4.0"
+    "@primer/primitives": "7.5.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.2",
     "@changesets/cli": "2.20.0",
     "@github/prettier-config": "0.0.4",
     "@koddsson/postcss-sass": "5.0.1",
-    "@primer/stylelint-config": "^12.3.1",
+    "@primer/stylelint-config": "^12.3.3",
     "autoprefixer": "10.4.2",
     "chokidar-cli": "3.0.0",
     "cssstats": "4.0.2",
-    "eslint": "8.8.0",
+    "eslint": "8.10.0",
     "eslint-plugin-github": "4.3.5",
     "eslint-plugin-jest": "26.0.0",
     "eslint-plugin-prettier": "4.0.0",
@@ -60,7 +60,7 @@
     "globby": "13.1.0",
     "jest": "27.4.7",
     "js-yaml": "4.1.0",
-    "postcss": "8.4.6",
+    "postcss": "8.4.7",
     "postcss-calc": "8.2.3",
     "postcss-import": "14.0.2",
     "postcss-load-config": "3.1.0",

package/subhead/subhead.scss

@@ -18,6 +18,7 @@
   font-size: $h2-size;
   font-weight: $font-weight-normal;
   flex: 1 1 auto;
+  order: 0;
 }
 
 // Make the text bold and red for dangerous content
@@ -31,6 +32,7 @@
   font-size: $body-font-size;
   color: var(--color-fg-muted);
   flex: 1 100%;
+  order: 2;
 }
 
 // Add 1 or 2 buttons to the right of the heading
@@ -38,6 +40,7 @@
   margin: $spacer-1 0 $spacer-1 $spacer-1;
   align-self: center;
   justify-content: flex-end;
+  order: 1;
 
   + .Subhead-description {
     margin-top: $spacer-1;

package/utilities/colors.scss

@@ -11,6 +11,8 @@
 .color-fg-attention { color: var(--color-attention-fg) !important; }
 .color-fg-severe    { color: var(--color-severe-fg) !important; }
 .color-fg-danger    { color: var(--color-danger-fg) !important; }
+.color-fg-open      { color: var(--color-open-fg) !important; }
+.color-fg-closed    { color: var(--color-closed-fg) !important; }
 .color-fg-done      { color: var(--color-done-fg) !important; }
 .color-fg-sponsors  { color: var(--color-sponsors-fg) !important; }
 
@@ -39,6 +41,12 @@
 .color-bg-danger          { background-color: var(--color-danger-subtle) !important; }
 .color-bg-danger-emphasis { background-color: var(--color-danger-emphasis) !important; }
 
+.color-bg-open          { background-color: var(--color-open-subtle) !important; }
+.color-bg-open-emphasis { background-color: var(--color-open-emphasis) !important; }
+
+.color-bg-closed          { background-color: var(--color-closed-subtle) !important; }
+.color-bg-closed-emphasis { background-color: var(--color-closed-emphasis) !important; }
+
 .color-bg-done          { background-color: var(--color-done-subtle) !important; }
 .color-bg-done-emphasis { background-color: var(--color-done-emphasis) !important; }
 
@@ -66,6 +74,12 @@
 .color-border-danger          { border-color: var(--color-danger-muted) !important; }
 .color-border-danger-emphasis { border-color: var(--color-danger-emphasis) !important; }
 
+.color-border-open          { border-color: var(--color-open-muted) !important; }
+.color-border-open-emphasis { border-color: var(--color-open-emphasis) !important; }
+
+.color-border-closed          { border-color: var(--color-closed-muted) !important; }
+.color-border-closed-emphasis { border-color: var(--color-closed-emphasis) !important; }
+
 .color-border-done          { border-color: var(--color-done-muted) !important; }
 .color-border-done-emphasis { border-color: var(--color-done-emphasis) !important; }