diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 1328665a03eb5d..b74637bc7ff68e 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -7,7 +7,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 }
 
 .emotion-0 {
-  margin-bottom: 8px;
+  margin-bottom: calc(4px * 2);
 }
 
 .components-panel__row .emotion-0 {
diff --git a/packages/components/src/color-picker/test/__snapshots__/index.js.snap b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
index 98a90fc9593486..e085a2a8f03ba8 100644
--- a/packages/components/src/color-picker/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
@@ -96,10 +96,10 @@ Snapshot Diff:
             </div>
 @@ -119,22 +119,22 @@
             <div
-              className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
+              className="components-base-control__field css-igk9ll-StyledField e1puf3u1"
             >
               <label
-                className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
+                className="components-base-control__label css-13ck15n-StyledLabel e1puf3u2"
 -               htmlFor="inspector-text-control-4"
 +               htmlFor="inspector-text-control-3"
               >
@@ -218,10 +218,10 @@ Snapshot Diff:
             </div>
 @@ -119,22 +119,22 @@
             <div
-              className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
+              className="components-base-control__field css-igk9ll-StyledField e1puf3u1"
             >
               <label
-                className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
+                className="components-base-control__label css-13ck15n-StyledLabel e1puf3u2"
 -               htmlFor="inspector-text-control-8"
 +               htmlFor="inspector-text-control-7"
               >
@@ -340,10 +340,10 @@ Snapshot Diff:
             </div>
 @@ -119,22 +119,22 @@
             <div
-              className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
+              className="components-base-control__field css-igk9ll-StyledField e1puf3u1"
             >
               <label
-                className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
+                className="components-base-control__label css-13ck15n-StyledLabel e1puf3u2"
 -               htmlFor="inspector-text-control-10"
 +               htmlFor="inspector-text-control-9"
               >
@@ -462,10 +462,10 @@ Snapshot Diff:
             </div>
 @@ -119,22 +119,22 @@
             <div
-              className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
+              className="components-base-control__field css-igk9ll-StyledField e1puf3u1"
             >
               <label
-                className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
+                className="components-base-control__label css-13ck15n-StyledLabel e1puf3u2"
 -               htmlFor="inspector-text-control-6"
 +               htmlFor="inspector-text-control-5"
               >
@@ -547,10 +547,10 @@ Snapshot Diff:
             </div>
 @@ -119,22 +119,22 @@
             <div
-              className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
+              className="components-base-control__field css-igk9ll-StyledField e1puf3u1"
             >
               <label
-                className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
+                className="components-base-control__label css-13ck15n-StyledLabel e1puf3u2"
 -               htmlFor="inspector-text-control-2"
 +               htmlFor="inspector-text-control-1"
               >
@@ -580,7 +580,7 @@ exports[`ColorPicker should render color picker 1`] = `
 }
 
 .emotion-2 {
-  margin-bottom: 8px;
+  margin-bottom: calc(4px * 2);
 }
 
 .components-panel__row .emotion-2 {
@@ -589,7 +589,7 @@ exports[`ColorPicker should render color picker 1`] = `
 
 .emotion-0 {
   display: inline-block;
-  margin-bottom: 8px;
+  margin-bottom: calc(4px * 2);
 }
 
 <div
diff --git a/packages/edit-post/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap b/packages/edit-post/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap
index c9f64347ae092b..06beb13729f86e 100644
--- a/packages/edit-post/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap
+++ b/packages/edit-post/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap
@@ -7,7 +7,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
 }
 
 .emotion-0 {
-  margin-bottom: 8px;
+  margin-bottom: calc(4px * 2);
 }
 
 .components-panel__row .emotion-0 {
@@ -70,7 +70,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
 }
 
 .emotion-0 {
-  margin-bottom: 8px;
+  margin-bottom: calc(4px * 2);
 }
 
 .components-panel__row .emotion-0 {
@@ -119,7 +119,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
 }
 
 .emotion-0 {
-  margin-bottom: 8px;
+  margin-bottom: calc(4px * 2);
 }
 
 .components-panel__row .emotion-0 {
@@ -182,7 +182,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
 }
 
 .emotion-0 {
-  margin-bottom: 8px;
+  margin-bottom: calc(4px * 2);
 }
 
 .components-panel__row .emotion-0 {