@reuters-graphics/graphics-components 3.0.2 → 3.0.4

package/dist/scss/tokens/spacers/_margin.scss

@@ -40,48 +40,48 @@ $margin-levels: (
     margin: $value;
   }
   .mt-#{$level} {
-    margin-top: $value;
+    margin-block-start: $value;
   }
   .mr-#{$level} {
-    margin-right: $value;
+    margin-inline-end: $value;
   }
   .mb-#{$level} {
-    margin-bottom: $value;
+    margin-block-end: $value;
   }
   .ml-#{$level} {
-    margin-left: $value;
+    margin-inline-start: $value;
   }
   .mx-#{$level} {
-    margin-right: $value;
-    margin-left: $value;
+    margin-inline-start: $value;
+    margin-inline-end: $value;
   }
   .my-#{$level} {
-    margin-top: $value;
-    margin-bottom: $value;
+    margin-block-start: $value;
+    margin-block-end: $value;
   }
 
   .\!m-#{$level} {
     margin: $value !important;
   }
   .\!mt-#{$level} {
-    margin-top: $value !important;
+    margin-block-start: $value !important;
   }
   .\!mr-#{$level} {
-    margin-right: $value !important;
+    margin-inline-end: $value !important;
   }
   .\!mb-#{$level} {
-    margin-bottom: $value !important;
+    margin-block-end: $value !important;
   }
   .\!ml-#{$level} {
-    margin-left: $value !important;
+    margin-inline-start: $value !important;
   }
   .\!mx-#{$level} {
-    margin-right: $value !important;
-    margin-left: $value !important;
+    margin-inline-start: $value !important;
+    margin-inline-end: $value !important;
   }
   .\!my-#{$level} {
-    margin-top: $value !important;
-    margin-bottom: $value !important;
+    margin-block-start: $value !important;
+    margin-block-end: $value !important;
   }
 }
 
@@ -89,21 +89,21 @@ $margin-levels: (
   margin: auto;
 }
 .mx-auto {
-  margin-right: auto;
-  margin-left: auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
 }
 .my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
+  margin-block-start: auto;
+  margin-block-end: auto;
 }
 .\!m-auto {
   margin: auto !important;
 }
 .\!mx-auto {
-  margin-right: auto !important;
-  margin-left: auto !important;
+  margin-inline-start: auto !important;
+  margin-inline-end: auto !important;
 }
 .\!my-auto {
-  margin-top: auto !important;
-  margin-bottom: auto !important;
+  margin-block-start: auto !important;
+  margin-block-end: auto !important;
 }

package/dist/scss/tokens/spacers/_padding.scss

@@ -40,47 +40,47 @@ $padding-levels: (
     padding: $value;
   }
   .pt-#{$level} {
-    padding-top: $value;
+    padding-block-start: $value;
   }
   .pr-#{$level} {
-    padding-right: $value;
+    padding-inline-end: $value;
   }
   .pb-#{$level} {
-    padding-bottom: $value;
+    padding-block-end: $value;
   }
   .pl-#{$level} {
-    padding-left: $value;
+    padding-inline-start: $value;
   }
   .px-#{$level} {
-    padding-right: $value;
-    padding-left: $value;
+    padding-inline-start: $value;
+    padding-inline-end: $value;
   }
   .py-#{$level} {
-    padding-top: $value;
-    padding-bottom: $value;
+    padding-block-start: $value;
+    padding-block-end: $value;
   }
 
   .\!p-#{$level} {
     padding: $value !important;
   }
   .\!pt-#{$level} {
-    padding-top: $value !important;
+    padding-block-start: $value !important;
   }
   .\!pr-#{$level} {
-    padding-right: $value !important;
+    padding-inline-end: $value !important;
   }
   .\!pb-#{$level} {
-    padding-bottom: $value !important;
+    padding-block-end: $value !important;
   }
   .\!pl-#{$level} {
-    padding-left: $value !important;
+    padding-inline-start: $value !important;
   }
   .\!px-#{$level} {
-    padding-right: $value !important;
-    padding-left: $value !important;
+    padding-inline-start: $value !important;
+    padding-inline-end: $value !important;
   }
   .\!py-#{$level} {
-    padding-top: $value !important;
-    padding-bottom: $value !important;
+    padding-block-start: $value !important;
+    padding-block-end: $value !important;
   }
 }