Merge branch 'main' into tobiasahlin/marketing-new-typescale

.changeset/smooth-eagles-tie.md

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

deprecations.js

@@ -13,6 +13,23 @@ const versionDeprecations = {
       ],
       message: `This selector is deprecated, please refer to the Marketing Typography documentation.`
     },
+    {
+      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,11 +6,14 @@
 @each $breakpoint, $variant in $marketing-position-variants {
   @include breakpoint($breakpoint) {
     @each $scale, $size in $marketing-all-spacers {
+      @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; }
+      }
 
+      @if ($size != 0) {
         .top#{$variant}-n#{$scale}     { top: -$size !important; }
         .right#{$variant}-n#{$scale}   { right: -$size !important; }
         .bottom#{$variant}-n#{$scale}  { bottom: -$size !important; }
@@ -18,6 +21,7 @@
       }
     }
   }
+}
 
 // Negative offset columns
 @each $breakpoint, $variant in $responsive-variants {