Merge branch 'main' into tobiasahlin/merge-marketing-spacing-utilities

Author: tobiasahlin

.changeset/smooth-eagles-tie.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": major
+---
+
+Remove redundant marketing layout selectors

deprecations.js

@@ -16,6 +16,23 @@ const versionDeprecations = {
       ],
       message: `This selector is deprecated, please use pt-X, pr-X, pb-X, and pl-X to set paddings on all sides above spacing level 6.`
     },
+    {
+      selectors: [
+        '.top-n0',
+        '.right-n0',
+        '.bottom-n0',
+        '.left-n0',
+        '.top-md-n0',
+        '.right-md-n0',
+        '.bottom-md-n0',
+        '.left-md-n0',
+        '.top-lg-n0',
+        '.right-lg-n0',
+        '.bottom-lg-n0',
+        '.left-lg-n0'
+      ],
+      message: `This selector is deprecated, please use a non-negative selector to set the value to 0 (e.g. top-md-0).`
+    },
     {
       selectors: ['.bg-shade-gradient'],
       message: `This selector is deprecated, please use "color-bg-secondary" instead of "bg-shade-gradient".`

docs/content/support/v16-migration.mdx

@@ -24,7 +24,7 @@ Most components don't need to be updated and should work without making changes.
 | `.Counter--gray`                                             | `.Counter--primary`   |
 | `.Counter--gray-light`                                       | `.Counter--secondary` |
 
-### Dropdwon
+### Dropdown
 
 | [`v15`](https://primer.style/css/components/dropdown#dark) | `v16` |
 | ---------------------------------------------------------- | ----- |

src/marketing/utilities/layout.scss

@@ -6,15 +6,19 @@
 @each $breakpoint, $variant in $marketing-position-variants {
   @include breakpoint($breakpoint) {
     @each $scale, $size in $spacer-map-extended {
-      .top#{$variant}-#{$scale}     { top: $size !important; }
-      .right#{$variant}-#{$scale}   { right: $size !important; }
-      .bottom#{$variant}-#{$scale}  { bottom: $size !important; }
-      .left#{$variant}-#{$scale}    { left: $size !important; }
+      @if ($size != 0 or $variant != "") {
+        .top#{$variant}-#{$scale}     { top: $size !important; }
+        .right#{$variant}-#{$scale}   { right: $size !important; }
+        .bottom#{$variant}-#{$scale}  { bottom: $size !important; }
+        .left#{$variant}-#{$scale}    { left: $size !important; }
+      }
 
-      .top#{$variant}-n#{$scale}     { top: -$size !important; }
-      .right#{$variant}-n#{$scale}   { right: -$size !important; }
-      .bottom#{$variant}-n#{$scale}  { bottom: -$size !important; }
-      .left#{$variant}-n#{$scale}    { left: -$size !important; }
+      @if ($size != 0) {
+        .top#{$variant}-n#{$scale}     { top: -$size !important; }
+        .right#{$variant}-n#{$scale}   { right: -$size !important; }
+        .bottom#{$variant}-n#{$scale}  { bottom: -$size !important; }
+        .left#{$variant}-n#{$scale}    { left: -$size !important; }
+      }
     }
   }
 }