Update all instances of previous -spacing-* variables, T-20761

nadyahakkinen · nadyahakkinen · commit 1eba8a18f521 · 2024-10-25T13:18:09.000+03:00
diff --git a/sass/features/_top.scss b/sass/features/_top.scss
@@ -4,7 +4,7 @@
   --color-background-top-hover: #f0f0f0;
   background-color: var(--color-background-top);
   border-radius: 2px;
-  bottom: var(--padding-container-horizontal);
+  bottom: var(--spacing-container-padding-inline);
   color: var(--color-black);
   cursor: pointer;
   font-size: var(--typography-size-16);
@@ -13,7 +13,7 @@
   line-height: 30px;
   opacity: 0;
   position: fixed;
-  right: var(--padding-container-horizontal);
+  right: var(--spacing-container-padding-inline);
   text-align: center;
   text-decoration: none;
   transition: 500ms opacity;
diff --git a/sass/gutenberg/_editor.scss b/sass/gutenberg/_editor.scss
@@ -81,8 +81,8 @@
   .wp-block-gallery,
   .wp-block.editor-post-title {
     @media (max-width: $width-max-article + 40px) {
-      padding-left: var(--padding-container-horizontal);
-      padding-right: var(--padding-container-horizontal);
+      padding-left: var(--spacing-container-padding-inline);
+      padding-right: var(--spacing-container-padding-inline);
       width: 100%;
 
       &.alignleft,
@@ -103,12 +103,12 @@
 
   // Full width gallery should be always be with paddings
   .wp-block[data-align="full"] > .wp-block-gallery {
-    padding-left: var(--padding-container-horizontal);
-    padding-right: var(--padding-container-horizontal);
+    padding-left: var(--spacing-container-padding-inline);
+    padding-right: var(--spacing-container-padding-inline);
 
     &.alignfull {
-      padding-left: var(--padding-container-horizontal);
-      padding-right: var(--padding-container-horizontal);
+      padding-left: var(--spacing-container-padding-inline);
+      padding-right: var(--spacing-container-padding-inline);
     }
   }
 
diff --git a/sass/gutenberg/blocks/_core-blockquote.scss b/sass/gutenberg/blocks/_core-blockquote.scss
@@ -43,7 +43,7 @@ blockquote {
 
   @media (max-width: $width-max-article + 40px) {
     padding: 3.5rem 2rem;
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 
   @media (max-width: $container-mobile) {
@@ -53,9 +53,9 @@ blockquote {
 
 .wp-block-blockquote.alignwide,
 .wp-block-blockquote.alignfull {
-  padding-left: var(--padding-container-horizontal);
-  padding-right: var(--padding-container-horizontal);
-  width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+  padding-left: var(--spacing-container-padding-inline);
+  padding-right: var(--spacing-container-padding-inline);
+  width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
 }
 
 .wp-block-blockquote blockquote {
diff --git a/sass/gutenberg/blocks/_core-columns.scss b/sass/gutenberg/blocks/_core-columns.scss
@@ -14,8 +14,8 @@ h3 {
 
 @for $i from 1 through 9 {
   .wp-block-columns.has-#{$i}-columns.alignfull {
-    padding-left: var(--padding-container-horizontal);
-    padding-right: var(--padding-container-horizontal);
+    padding-left: var(--spacing-container-padding-inline);
+    padding-right: var(--spacing-container-padding-inline);
     width: 100%;
   }
 
diff --git a/sass/gutenberg/blocks/_core-image.scss b/sass/gutenberg/blocks/_core-image.scss
@@ -1,8 +1,8 @@
 // Image block
 .wp-block-image {
   display: block;
-  margin-bottom: var(--margin-wp-block-image);
-  margin-top: var(--margin-wp-block-image);
+  margin-bottom: var(--spacing-wp-block-image-margin-block);
+  margin-top: var(--spacing-wp-block-image-margin-block);
 
   &.alignwide,
   &.alignfull {
@@ -48,7 +48,7 @@
 
   @media (max-width: $width-grid-base + 40px) {
     &.alignwide {
-      width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+      width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
     }
   }
 
diff --git a/sass/gutenberg/blocks/_core-list.scss b/sass/gutenberg/blocks/_core-list.scss
@@ -2,7 +2,7 @@
 ul,
 ol {
   list-style-position: outside;
-  width: calc((100% - calc(var(--padding-container-horizontal) * 2)));
+  width: calc((100% - calc(var(--spacing-container-padding-inline) * 2)));
 }
 
 ul {
diff --git a/sass/gutenberg/blocks/_core-paragraph.scss b/sass/gutenberg/blocks/_core-paragraph.scss
@@ -18,6 +18,6 @@
 
 @media (max-width: $width-grid-base + 40px) {
   .has-background {
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
diff --git a/sass/gutenberg/blocks/_core-pullquote.scss b/sass/gutenberg/blocks/_core-pullquote.scss
@@ -11,7 +11,7 @@
   }
 
   @media (max-width: $width-grid-base + 40px) {
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
 
@@ -25,13 +25,13 @@
   }
 
   @media (max-width: $width-grid-base + 40px) {
-    margin-left: var(--padding-container-horizontal);
-    margin-right: var(--padding-container-horizontal);
+    margin-left: var(--spacing-container-padding-inline);
+    margin-right: var(--spacing-container-padding-inline);
   }
 }
 
 .wp-block-pullquote.alignfull {
-  margin-left: var(--padding-container-horizontal);
-  margin-right: var(--padding-container-horizontal);
-  width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+  margin-left: var(--spacing-container-padding-inline);
+  margin-right: var(--spacing-container-padding-inline);
+  width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
 }
diff --git a/sass/gutenberg/blocks/_core-table.scss b/sass/gutenberg/blocks/_core-table.scss
@@ -55,20 +55,20 @@ table {
 
 .wp-block-table {
   @media (max-width: $width-grid-base + 40px) {
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
 
 .wp-block-table.alignfull {
-  margin-left: var(--padding-container-horizontal);
-  margin-right: var(--padding-container-horizontal);
-  width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+  margin-left: var(--spacing-container-padding-inline);
+  margin-right: var(--spacing-container-padding-inline);
+  width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
 }
 
 @media (max-width: $width-grid-base + 40px) {
   .wp-block-table.alignwide {
-    margin-left: var(--padding-container-horizontal);
-    margin-right: var(--padding-container-horizontal);
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    margin-left: var(--spacing-container-padding-inline);
+    margin-right: var(--spacing-container-padding-inline);
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
diff --git a/sass/gutenberg/blocks/_core-video.scss b/sass/gutenberg/blocks/_core-video.scss
@@ -6,7 +6,7 @@
 
 @media (max-width: $width-grid-base + 40px) {
   .wp-block-video.alignwide {
-    width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+    width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
 
diff --git a/sass/gutenberg/formatting/_align.scss b/sass/gutenberg/formatting/_align.scss
@@ -11,7 +11,7 @@
 
   .alignleft > img {
     margin-bottom: var(--margin-between-paragraphs);
-    margin-right: var(--padding-container-horizontal);
+    margin-right: var(--spacing-container-padding-inline);
     margin-top: var(--margin-between-paragraphs);
 
     + figcaption {
@@ -21,7 +21,7 @@
 
   .alignright > img {
     margin-bottom: var(--margin-between-paragraphs);
-    margin-left: var(--padding-container-horizontal);
+    margin-left: var(--spacing-container-padding-inline);
     margin-top: var(--margin-between-paragraphs);
 
     + figcaption {
@@ -31,8 +31,8 @@
 
   .alignwide {
     max-width: $width-wide;
-    padding-left: var(--padding-container-horizontal);
-    padding-right: var(--padding-container-horizontal);
+    padding-left: var(--spacing-container-padding-inline);
+    padding-right: var(--spacing-container-padding-inline);
     width: 100%;
 
     @media (min-width: $width-wide + 40px) {
@@ -52,8 +52,8 @@
     }
 
     @media (min-width: $width-max-article + 40px) {
-      margin-bottom: var(--padding-block);
-      margin-top: var(--padding-block);
+      margin-bottom: var(--spacing-content-padding-block);
+      margin-top: var(--spacing-content-padding-block);
       max-width: $width-full;
       width: $width-full;
     }
diff --git a/sass/gutenberg/layout/_content.scss b/sass/gutenberg/layout/_content.scss
@@ -2,10 +2,10 @@
 .editor-styles-wrapper,
 .article-content {
   max-width: 100%;
-  padding-bottom: var(--padding-block);
+  padding-bottom: var(--spacing-content-padding-block);
   padding-left: 0;
   padding-right: 0;
-  padding-top: var(--padding-block);
+  padding-top: var(--spacing-content-padding-block);
 }
 
 // Gutenberg core magic
@@ -18,13 +18,13 @@
   max-width: $width-max-article;
 
   @media (max-width: $width-max-article + 40px) {
-    padding-left: var(--padding-container-horizontal);
-    padding-right: var(--padding-container-horizontal);
+    padding-left: var(--spacing-container-padding-inline);
+    padding-right: var(--spacing-container-padding-inline);
 
     &.alignfull {
-      padding-left: var(--padding-container-horizontal);
-      padding-right: var(--padding-container-horizontal);
-      width: calc(100% - calc(var(--padding-container-horizontal) * 2));
+      padding-left: var(--spacing-container-padding-inline);
+      padding-right: var(--spacing-container-padding-inline);
+      width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
     }
   }
 }
diff --git a/sass/layout/_general.scss b/sass/layout/_general.scss
@@ -45,16 +45,16 @@
   margin-left: auto;
   margin-right: auto;
   max-width: $width-grid-base;
-  padding-bottom: var(--padding-container-vertical);
-  padding-left: var(--padding-container-horizontal);
-  padding-right: var(--padding-container-horizontal);
-  padding-top: var(--padding-container-vertical);
+  padding-bottom: var(--spacing-container-padding-block);
+  padding-left: var(--spacing-container-padding-inline);
+  padding-right: var(--spacing-container-padding-inline);
+  padding-top: var(--spacing-container-padding-block);
 
   // If base grid is larger than Macbook Air screen
   @if $width-grid-base > 1440 {
     @media (min-width: $container-ipad-landscape) and (max-width: 140rem + 6.4rem) {
-      padding-left: var(--padding-container-horizontal-large);
-      padding-right: var(--padding-container-horizontal-large);
+      padding-left: var(--spacing-container-padding-inline-large);
+      padding-right: var(--spacing-container-padding-inline-large);
     }
   }
 }
diff --git a/sass/layout/_site-header.scss b/sass/layout/_site-header.scss
@@ -7,15 +7,15 @@
   margin-left: auto;
   margin-right: auto;
   max-width: $width-grid-base;
-  padding-bottom: var(--padding-site-header-vertical);
-  padding-left: var(--padding-container-horizontal);
-  padding-right: var(--padding-container-horizontal);
-  padding-top: var(--padding-site-header-vertical);
+  padding-bottom: var(--spacing-site-header-padding-block);
+  padding-left: var(--spacing-container-padding-inline);
+  padding-right: var(--spacing-container-padding-inline);
+  padding-top: var(--spacing-site-header-padding-block);
   position: relative;
   z-index: 15;
 
   @media (max-width: $width-max-mobile) {
-    --padding-container-horizontal: 2rem;
+    --spacing-container-padding-inline: 2rem;
   }
 }
 
@@ -51,10 +51,10 @@
   font-size: clamp(.5rem, 3.4vw, 3rem);
   font-weight: var(--typography-weight-semibold);
   justify-content: center;
-  margin-bottom: var(--padding-container-vertical);
+  margin-bottom: var(--spacing-container-padding-block);
   margin-left: auto;
   margin-right: auto;
-  margin-top: calc(var(--padding-container-vertical) * 2);
+  margin-top: calc(var(--spacing-container-padding-block) * 2);
   // stylelint-disable-next-line
   max-width: $width-grid-base - 40px;
   opacity: .7;
diff --git a/sass/variables/_spacings-new.scss b/sass/variables/_spacings-new.scss
@@ -11,8 +11,8 @@
   --spacing-content-padding-block: 8rem;
 
   // Margins
-  --spacing-margin-between-text-elements: 4rem;
-  --spacing-margin-wp-block-image: 4rem;
+  --spacing-text-margin-block: 4rem;
+  --spacing-wp-block-image-margin-block: 4rem;
   --spacing-paragraphs-margin-block: 2.7rem;
 
   // Mid-sized screens
diff --git a/sass/variables/_spacings.scss b/sass/variables/_spacings.scss
@@ -1,52 +1,52 @@
 // CSS Variables for responsive paddings and margins
 :root {
   // Gaps
-  --grid-gap: 4.8rem;
+  --spacing-grid-gap: 4.8rem;
 
   // Paddings
-  --padding-container-horizontal: 2rem;
-  --padding-container-horizontal-large: 6.4rem;
-  --padding-container-vertical: 6.4rem;
-  --padding-site-header-vertical: 2rem;
-  --padding-block: 8rem;
+  --spacing-container-padding-inline: 2rem;
+  --spacing-container-padding-inline-large: 6.4rem;
+  --spacing-container-padding-block: 6.4rem;
+  --spacing-site-header-padding-block: 2rem;
+  --spacing-content-padding-block: 8rem;
 
   // Margins
-  --margin-between-text-elements: 4rem;
-  --margin-wp-block-image: 4rem;
-  --margin-between-paragraphs: 2.7rem;
+  --spacing-text-margin-block: 4rem;
+  --spacing-wp-block-image-margin-block: 4rem;
+  --spacing-paragraphs-margin-block: 2.7rem;
 
   // Mid-sized screens
   @media (max-width: $width-grid-base + 150px) {
-    --padding-container-horizontal: 6.4rem;
+    --spacing-container-padding-inline: 6.4rem;
   }
 
   // When there's no longer room for container to fit with wider white space
   @media (max-width: 700px) {
-    --padding-container-horizontal: 2rem;
+    --spacing-container-padding-inline: 2rem;
   }
 
   // When navigation transforms to a responsive hamburger menu
   @media (max-width: $width-max-mobile) {
-    --padding-site-header-vertical: 2rem;
+    --spacing-site-header-padding-block: 2rem;
   }
 
   // iPad
   @media (max-width: $container-ipad-landscape) {
-    --grid-gap: 3.2rem;
+    --spacing-grid-gap: 3.2rem;
   }
 
   @media (max-width: $container-ipad) {
-    --grid-gap: var(--padding-container-horizontal);
-    --padding-container-vertical: 5rem;
+    --spacing-grid-gap: var(--spacing-container-padding-inline);
+    --spacing-container-padding-block: 5rem;
   }
 
   // Between iPad and a mobile phone
   @media (max-width: 600px) {
-    --padding-block: 6rem;
+    --spacing-content-padding-block: 6rem;
   }
 
   // Vars in mobile
   @media (max-width: $container-mobile) {
-    --padding-container-vertical: 4rem;
+    --spacing-container-padding-block: 4rem;
   }
 }
diff --git a/sass/views/_single.scss b/sass/views/_single.scss
@@ -36,7 +36,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
-  margin-bottom: var(--margin-between-text-elements);
+  margin-bottom: var(--spacing-text-margin-block);
   margin-top: 0;
 
   // stylelint-disable a11y/font-size-is-readable

Original file line number	Diff line number	Diff line change
`@@ -14,8 +14,8 @@ h3 {`
`14`	`14`
`15`	`15`	`@for $i from 1 through 9 {`
`16`	`16`	`.wp-block-columns.has-#{$i}-columns.alignfull {`
`17`		`- padding-left: var(--padding-container-horizontal);`
`18`		`- padding-right: var(--padding-container-horizontal);`
	`17`	`+ padding-left: var(--spacing-container-padding-inline);`
	`18`	`+ padding-right: var(--spacing-container-padding-inline);`
`19`	`19`	`width: 100%;`
`20`	`20`	`}`
`21`	`21`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`ul,`
`3`	`3`	`ol {`
`4`	`4`	`list-style-position: outside;`
`5`		`- width: calc((100% - calc(var(--padding-container-horizontal) * 2)));`
	`5`	`+ width: calc((100% - calc(var(--spacing-container-padding-inline) * 2)));`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`ul {`
Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,6 @@`
`18`	`18`
`19`	`19`	`@media (max-width: $width-grid-base + 40px) {`
`20`	`20`	`.has-background {`
`21`		`- width: calc(100% - calc(var(--padding-container-horizontal) * 2));`
	`21`	`+ width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));`
`22`	`22`	`}`
`23`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`@media (max-width: $width-grid-base + 40px) {`
`14`		`- width: calc(100% - calc(var(--padding-container-horizontal) * 2));`
	`14`	`+ width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`
`@@ -25,13 +25,13 @@`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`@media (max-width: $width-grid-base + 40px) {`
`28`		`- margin-left: var(--padding-container-horizontal);`
`29`		`- margin-right: var(--padding-container-horizontal);`
	`28`	`+ margin-left: var(--spacing-container-padding-inline);`
	`29`	`+ margin-right: var(--spacing-container-padding-inline);`
`30`	`30`	`}`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`.wp-block-pullquote.alignfull {`
`34`		`- margin-left: var(--padding-container-horizontal);`
`35`		`- margin-right: var(--padding-container-horizontal);`
`36`		`- width: calc(100% - calc(var(--padding-container-horizontal) * 2));`
	`34`	`+ margin-left: var(--spacing-container-padding-inline);`
	`35`	`+ margin-right: var(--spacing-container-padding-inline);`
	`36`	`+ width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));`
`37`	`37`	`}`
Original file line number	Diff line number	Diff line change
`@@ -55,20 +55,20 @@ table {`
`55`	`55`
`56`	`56`	`.wp-block-table {`
`57`	`57`	`@media (max-width: $width-grid-base + 40px) {`
`58`		`- width: calc(100% - calc(var(--padding-container-horizontal) * 2));`
	`58`	`+ width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));`
`59`	`59`	`}`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`.wp-block-table.alignfull {`
`63`		`- margin-left: var(--padding-container-horizontal);`
`64`		`- margin-right: var(--padding-container-horizontal);`
`65`		`- width: calc(100% - calc(var(--padding-container-horizontal) * 2));`
	`63`	`+ margin-left: var(--spacing-container-padding-inline);`
	`64`	`+ margin-right: var(--spacing-container-padding-inline);`
	`65`	`+ width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));`
`66`	`66`	`}`
`67`	`67`
`68`	`68`	`@media (max-width: $width-grid-base + 40px) {`
`69`	`69`	`.wp-block-table.alignwide {`
`70`		`- margin-left: var(--padding-container-horizontal);`
`71`		`- margin-right: var(--padding-container-horizontal);`
`72`		`- width: calc(100% - calc(var(--padding-container-horizontal) * 2));`
	`70`	`+ margin-left: var(--spacing-container-padding-inline);`
	`71`	`+ margin-right: var(--spacing-container-padding-inline);`
	`72`	`+ width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));`
`73`	`73`	`}`
`74`	`74`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`
`7`	`7`	`@media (max-width: $width-grid-base + 40px) {`
`8`	`8`	`.wp-block-video.alignwide {`
`9`		`- width: calc(100% - calc(var(--padding-container-horizontal) * 2));`
	`9`	`+ width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));`
`10`	`10`	`}`
`11`	`11`	`}`
`12`	`12`