@primer/css 21.0.8-rc.f0bb3ee2 → 21.0.9-rc.e8810cb8

package/layout/app-frame.scss

@@ -29,7 +29,7 @@
     display: flex;
     width: 100%;
     padding: var(--base-size-16, 16px);
-    background: var(--bgColor-muted, var(--color-canvas-inset));
+    background: var(--bgColor-inset, var(--color-canvas-inset));
     padding-block-end: calc(var(--base-size-16, 16px) - var(--borderWidth-thin, 1px));
     isolation: isolate;
     align-items: center;

package/layout/page-layout.scss

@@ -14,12 +14,10 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
   --Layout-row-gap: #{$spacer-3};
 
   // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
-  // stylelint-disable length-zero-no-unit
   --Layout-outer-spacing-x: 0px; // wrapper margin x
   --Layout-outer-spacing-y: 0px; // wrapper margin y
   --Layout-inner-spacing-min: 0px; // default region padding
   --Layout-inner-spacing-max: 0px; // relaxed content horizontal padding
-  // stylelint-enable length-zero-no-unit
 }
 
 // Layout beta mixins
@@ -44,7 +42,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
   width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
   height: #{$spacer-2}; // 8px
   content: '';
-  background-color: var(--bgColor-muted, var(--color-canvas-inset));
+  background-color: var(--bgColor-inset, var(--color-canvas-inset));
   box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
 }
 
@@ -378,7 +376,6 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
 .PageLayout--columnGap-none {
   // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
-  // stylelint-disable-next-line length-zero-no-unit
   --Layout-column-gap: 0px;
 }
 
@@ -394,7 +391,6 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
 .PageLayout--rowGap-none {
   // the `px` unit is mandatory for `calc()` execution. See https://stackoverflow.com/a/32518348
-  // stylelint-disable length-zero-no-unit
   --Layout-row-gap: 0px;
 }
 

package/marketing/utilities/layout.scss

@@ -1,5 +1,4 @@
 // Layout utilities
-// stylelint-disable block-opening-brace-space-before
 
 // Responsive utilities to position content
 // No utilities for sm and xl breakpoints

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "21.0.8-rc.f0bb3ee2",
+  "version": "21.0.9-rc.e8810cb8",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -42,15 +42,15 @@
     "build:storybook": "cd docs && npm i && npm run build:storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.11.12",
-    "@primer/view-components": "^0.1.0"
+    "@primer/primitives": "^7.12.0",
+    "@primer/view-components": "^0.5.1"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.1",
     "@csstools/postcss-sass": "^5.0.1",
     "@github/prettier-config": "^0.0.6",
-    "@primer/stylelint-config": "^12.7.1",
+    "@primer/stylelint-config": "^12.8.0",
     "autoprefixer": "^10.4.13",
     "chokidar-cli": "^3.0.0",
     "cssstats": "^4.0.5",

package/support/mixins/color-modes.scss

@@ -29,6 +29,14 @@
 
       /*! */ // This is a fix for a cssstats bug see https://github.com/cssstats/cssstats/issues/331
     }
+
+    ::backdrop,
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"],
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"]::backdrop {
+      @content;
+
+      /*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
+    }
   }
 
   @else {

package/utilities/borders.scss

@@ -1,5 +1,5 @@
 // Core border utilities
-// stylelint-disable block-opening-brace-space-before, primer/borders
+// stylelint-disable primer/borders
 
 /* Add a gray border to the left and right */
 .border-x {

package/utilities/colors.scss

@@ -1,4 +1,3 @@
-// stylelint-disable block-opening-brace-space-before
 
 // Foreground
 
@@ -22,7 +21,7 @@
 
 .color-bg-default  { background-color: var(--bgColor-default, var(--color-canvas-default)) !important; }
 .color-bg-overlay  { background-color: var(--overlay-bgColor, var(--color-canvas-overlay)) !important; }
-.color-bg-inset    { background-color: var(--bgColor-muted, var(--color-canvas-inset)) !important; }
+.color-bg-inset    { background-color: var(--bgColor-inset, var(--color-canvas-inset)) !important; }
 .color-bg-subtle   { background-color: var(--bgColor-muted, var(--color-canvas-subtle)) !important; }
 .color-bg-emphasis { background-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important; }
 

package/utilities/flexbox.scss

@@ -1,5 +1,4 @@
 // Flex utility classes
-// stylelint-disable block-opening-brace-space-before
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     // Flexbox classes

package/utilities/layout.scss

@@ -1,5 +1,5 @@
 // Layout
-// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
+// stylelint-disable comment-empty-line-before
 
 /* Position */
 @each $breakpoint, $variant in $responsive-variants {

package/utilities/margin.scss

@@ -1,6 +1,4 @@
 // Margin spacer utilities
-// stylelint-disable block-opening-brace-space-before
-// stylelint-disable declaration-colon-space-before
 // stylelint-disable comment-empty-line-before
 // stylelint-disable primer/spacing
 

package/utilities/padding.scss

@@ -1,5 +1,4 @@
 // Padding spacer utilities
-// stylelint-disable block-opening-brace-space-before
 // stylelint-disable comment-empty-line-before
 // stylelint-disable primer/spacing