Rename CSS spacing variables to the new SCSS variables based on the new generated theme-json

Author: cedric07

src/scss/02-tools/_m-align.scss

@@ -17,12 +17,14 @@
  *
  */
 
+@use "../01-abstract/theme-json" as *;
+
 @mixin align($direction: left) {
 	float: $direction;
 
 	@if ($direction == left) {
-		margin-inline-end: var(--wp--preset--spacing--sm);
+		margin-inline-end: $settings-spacing-sm;
 	} @else {
-		margin-inline-start: var(--wp--preset--spacing--sm);
+		margin-inline-start: $settings-spacing-sm;
 	}
 }

src/scss/05-components/_searchform.scss

@@ -2,11 +2,13 @@
  * Searchform
  */
 
+@use "../01-abstract/theme-json" as *;
+
 .searchform {
 	position: relative;
 
 	&__field[type="search"] {
-		padding-inline-end: var(--wp--preset--spacing--sm);
+		padding-inline-end: $settings-spacing-sm;
 	}
 
 	&__submit {

src/scss/06-blocks/core/_columns.scss

@@ -1,11 +1,12 @@
+@use "../../01-abstract/theme-json" as *;
 @use "../../02-tools/m-breakpoint" as *;
 
 .wp-block-columns {
 	justify-content: space-between;
 
 	.wp-block-column {
 		&.has-background {
-			padding: var(--wp--preset--spacing--sm);
+			padding: $settings-spacing-sm;
 		}
 	}
 

src/scss/06-blocks/core/_group.scss

@@ -1,3 +1,4 @@
+@use "../../01-abstract/theme-json" as *;
 @use "../../02-tools/m-breakpoint" as *;
 @use "../../02-tools/m-editor-only" as *;
 
@@ -9,7 +10,7 @@
 	}
 
 	&.has-background {
-		padding: var(--wp--preset--spacing--sm);
+		padding: $settings-spacing-sm;
 	}
 
 	@include breakpoints(sm, max) {

src/scss/08-template-parts/_header.scss

@@ -20,7 +20,7 @@
 		top: var(--wp-admin-bar-height);
 		z-index: 10;
 		width: 100%;
-		background: var(--wp--preset--color--cyan-bluish-gray);
+		background: $settings-color-grey-500;
 	}
 
 	.container {

src/scss/08-template-parts/_hero.scss

@@ -10,8 +10,8 @@
 .hero {
 	@include row-fullwidth;
 
-	padding: var(--wp--preset--spacing--sm) 0;
-	margin-bottom: var(--wp--preset--spacing--sm);
+	padding: $settings-spacing-sm 0;
+	margin-bottom: $settings-spacing-sm;
 
 	.container {
 		position: relative;