Global spacing

components/02_Styles/spacing/_spacing.scss

@@ -0,0 +1,61 @@
+@mixin RV-Spacing__Outer--small {
+    margin: $-spacing-small;
+}
+
+@mixin RV-Spacing__Outer--medium {
+    margin: $-spacing-medium;
+}
+
+@mixin RV-Spacing__Outer--large {
+    margin: $-spacing-large;
+}
+
+
+@mixin RV-Spacing__Inner--small {
+    padding: $-spacing-small;
+    gap: $-spacing-small;
+}
+
+@mixin RV-Spacing__Inner--medium {
+    padding: $-spacing-medium;
+    gap: $-spacing-medium;
+}
+
+@mixin RV-Spacing__Inner--large {
+    padding: $-spacing-large;
+    gap: $-spacing-large;
+}
+
+@mixin RV-Spacing {
+    &__Outer{
+        &--small {
+            @include RV-Spacing__Outer--small;
+        }
+
+        &--medium {
+            @include RV-Spacing__Outer--medium;
+        }
+
+        &--large {
+            @include RV-Spacing__Outer--large;
+        }
+    }
+
+    &__Inner{
+        &--small {
+            @include RV-Spacing__Inner--small;
+        }
+
+        &--medium {
+            @include RV-Spacing__Inner--medium;
+        }
+
+        &--large {
+            @include RV-Spacing__Inner--large;
+        }
+    }
+}
+
+.RV-Spacing {
+    @include RV-Spacing;
+}

components/02_Styles/spacing/spacing.config.json

@@ -0,0 +1,5 @@
+{
+  "context": {
+
+  }
+}

components/rcss.scss

@@ -1,2 +1,8 @@
+// Padding and Margin sizes
+
+$-spacing-small: 10px;
+$-spacing-medium: 25px;
+$-spacing-large: 35px;
+
 @import './pink.css';
 @import './components';