Custom spacing

css/spacing.css

@@ -24,10 +24,37 @@
 }
 
 /**
- * Vertical Spacing
+ * General spacing variables
  */
+/**
+ * custom spacing
+ */
+:root {
+    --spacing-default:10px;
+    --spacing-heading:20px;
+    --spacing-paragraph:16px;
+}
+
+:root {
+    --gap-vc-column:20px;
+    --gap-container:40px;
+}
+
 :root {
     --spacing-0:0;
+    --spacing-1:1px;
+    --spacing-2:2px;
+    --spacing-4:4px;
+    --spacing-6:6px;
+    --spacing-8:8px;
+    --spacing-12:12px;
+    --spacing-16:16px;
+    --spacing-24:24px;
+    --spacing-32:32px;
+    --spacing-48:48px;
+    --spacing-64:64px;
+    --spacing-96:96px;
+    --spacing-128:128px;
 }
 
 .pt0 {
@@ -45,3 +72,265 @@
 .mb0 {
     margin-bottom:var(--spacing-0);
 }
+
+.pt1 {
+    padding-top:var(--spacing-1);
+}
+
+.pb1 {
+    padding-bottom:var(--spacing-1);
+}
+
+.mt1 {
+    margin-top:var(--spacing-1);
+}
+
+.mb1 {
+    margin-bottom:var(--spacing-1);
+}
+
+.pt2 {
+    padding-top:var(--spacing-2);
+}
+
+.pb2 {
+    padding-bottom:var(--spacing-2);
+}
+
+.mt2 {
+    margin-top:var(--spacing-2);
+}
+
+.mb2 {
+    margin-bottom:var(--spacing-2);
+}
+
+.pt4 {
+    padding-top:var(--spacing-4);
+}
+
+.pb4 {
+    padding-bottom:var(--spacing-4);
+}
+
+.mt4 {
+    margin-top:var(--spacing-4);
+}
+
+.mb4 {
+    margin-bottom:var(--spacing-4);
+}
+
+.pt6 {
+    padding-top:var(--spacing-6);
+}
+
+.pb6 {
+    padding-bottom:var(--spacing-6);
+}
+
+.mt6 {
+    margin-top:var(--spacing-6);
+}
+
+.mb6 {
+    margin-bottom:var(--spacing-6);
+}
+
+.pt8 {
+    padding-top:var(--spacing-8);
+}
+
+.pb8 {
+    padding-bottom:var(--spacing-8);
+}
+
+.mt8 {
+    margin-top:var(--spacing-8);
+}
+
+.mb8 {
+    margin-bottom:var(--spacing-8);
+}
+
+.pt12 {
+    padding-top:var(--spacing-12);
+}
+
+.pb12 {
+    padding-bottom:var(--spacing-12);
+}
+
+.mt12 {
+    margin-top:var(--spacing-12);
+}
+
+.mb12 {
+    margin-bottom:var(--spacing-12);
+}
+
+.pt16 {
+    padding-top:var(--spacing-16);
+}
+
+.pb16 {
+    padding-bottom:var(--spacing-16);
+}
+
+.mt16 {
+    margin-top:var(--spacing-16);
+}
+
+.mb16 {
+    margin-bottom:var(--spacing-16);
+}
+
+.pt24 {
+    padding-top:var(--spacing-24);
+}
+
+.pb24 {
+    padding-bottom:var(--spacing-24);
+}
+
+.mt24 {
+    margin-top:var(--spacing-24);
+}
+
+.mb24 {
+    margin-bottom:var(--spacing-24);
+}
+
+.pt32 {
+    padding-top:var(--spacing-32);
+}
+
+.pb32 {
+    padding-bottom:var(--spacing-32);
+}
+
+.mt32 {
+    margin-top:var(--spacing-32);
+}
+
+.mb32 {
+    margin-bottom:var(--spacing-32);
+}
+
+.pt48 {
+    padding-top:var(--spacing-48);
+}
+
+.pb48 {
+    padding-bottom:var(--spacing-48);
+}
+
+.mt48 {
+    margin-top:var(--spacing-48);
+}
+
+.mb48 {
+    margin-bottom:var(--spacing-48);
+}
+
+.pt64 {
+    padding-top:var(--spacing-64);
+}
+
+.pb64 {
+    padding-bottom:var(--spacing-64);
+}
+
+.mt64 {
+    margin-top:var(--spacing-64);
+}
+
+.mb64 {
+    margin-bottom:var(--spacing-64);
+}
+
+.pt96 {
+    padding-top:var(--spacing-96);
+}
+
+.pb96 {
+    padding-bottom:var(--spacing-96);
+}
+
+.mt96 {
+    margin-top:var(--spacing-96);
+}
+
+.mb96 {
+    margin-bottom:var(--spacing-96);
+}
+
+.pt128 {
+    padding-top:var(--spacing-128);
+}
+
+.pb128 {
+    padding-bottom:var(--spacing-128);
+}
+
+.mt128 {
+    margin-top:var(--spacing-128);
+}
+
+.mb128 {
+    margin-bottom:var(--spacing-128);
+}
+
+/* Breakpoint md */
+@media only screen and (max-width:1024px) {
+    :root {
+        --spacing-32:30px;
+        --spacing-48:40px;
+        --spacing-64:50px;
+        --spacing-96:60px;
+        --spacing-128:70px;
+    }
+}
+:root {
+    --gap-20:20px;
+    --gap-40:40px;
+}
+
+.pt20 {
+    padding-top:var(--gap-20);
+}
+
+.pb20 {
+    padding-bottom:var(--gap-20);
+}
+
+.mt20 {
+    margin-top:var(--gap-20);
+}
+
+.mb20 {
+    margin-bottom:var(--gap-20);
+}
+
+.pt40 {
+    padding-top:var(--gap-40);
+}
+
+.pb40 {
+    padding-bottom:var(--gap-40);
+}
+
+.mt40 {
+    margin-top:var(--gap-40);
+}
+
+.mb40 {
+    margin-bottom:var(--gap-40);
+}
+
+/* Breakpoint md */
+@media only screen and (max-width:1024px) {
+    :root {
+        --gap-40:20px;
+    }
+}

scss/_config.scss

@@ -40,7 +40,26 @@
 //);
 
 // vertical spacing
-//$vertical_spacing: (
-//        "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128,
-//        "md":    0 1 2 4 6 8 12 16 24 30 40 50 60 70,
-//);
+$vertical_spacing: (
+        "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128,
+        "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70,
+);
+
+// custom spacing
+$custom_spacing: (
+        'default':10,
+        'heading':20,
+        'paragraph':16,
+);
+
+// horizontal spacing
+$horizontal_spacing: (
+        "values":20 40,
+        "md":20 20,
+);
+
+// gap spacing (horizontal)
+$gap_spacing: (
+        "vc-column":20,
+        "container":40px,
+);

scss/_helpers.scss

@@ -439,4 +439,41 @@
   }
 
   @return --#{$project-prefix}#{$prop};
-}
+}
+
+// Find a value from the key in list
+// ($list:0 1 2 4 6 8 12 16 24 32 48 64 96 128, $value: 48) => true
+@function map-search($list, $value) {
+  @for $i from 1 through length($list) {
+    @if (nth($list, $i) == $value) {
+      @return true;
+    }
+  }
+  @return false;
+}
+
+// Define if the value is containing any CSS unit, create CSS unit if it not
+@mixin print-variables-in-root($list_responsive_values, $list_responsive_names,  $variable_name) {
+  // get value list from $list_responsive_names
+  $allowed_values_list: map-get($list_responsive_values, "values");
+
+  :root {
+    @each $responsive_name, $responsive_value in $list_responsive_names {
+      $newValue: format-value($responsive_value); // e.g. 90px
+
+      // check if $responsive_value is containing any CSS unit
+      $has_unit: get-unit($responsive_value) != "";
+
+      // check if $responsive_value in $list_responsive_names
+      $is_allowed_value: map-search($allowed_values_list, $responsive_value);
+
+      // use responsive variable
+      @if ($is_allowed_value and not $has_unit) {
+        $newValue: var(#{get-variable(#{$variable_name}-#{replace-prop($responsive_value)})}); // => var(--$variable_name-90);
+      }
+
+      @include get-variable(#{$variable_name}-#{replace-prop($responsive_name)}, $newValue); //  => --gap-container: $newValue;
+    }
+  }
+}
+