Adding separator automation #198

src/scss/_setting.scss

@@ -50,3 +50,16 @@ $buttons: (
         )
     )
 );
+
+
+/**
+ * Separator
+ */
+
+$separators: (
+    base: (
+        color                   : color(neutral, light),
+        style                   : solid,
+        width                   : 1px
+    )
+);

src/scss/chopchop-ui.scss

@@ -1,5 +1,7 @@
 @import "var";
-@import "helper/function";
+@import "helper/variable-function";
+@import "setting";
+@import "helper/setting-function";
 @import "helper/flex";
 @import "helper/breakpoint";
 @import "helper/shape";

src/scss/helper/_button.scss

@@ -1,11 +1,3 @@
-/**
- * Button color
- */
-
-@function button($button: 'base', $state: 'default', $var: 'color') {
-    @return map-get(map-get(map-get($buttons, $button), $state), $var);
-}
-
 /**
  * Generate colours for buttons
  */

src/scss/helper/_setting-function.scss

@@ -0,0 +1,16 @@
+/**
+ * Button
+ */
+
+@function button($button: 'base', $state: 'default', $var: 'color') {
+    @return map-get(map-get(map-get($buttons, $button), $state), $var);
+}
+
+
+/**
+ * Separator
+ */
+
+@function seperator($seperator, $var: 'width') {
+    @return map-get(map-get($separators, $seperator), $var);
+}

src/scss/styles.scss

@@ -3,21 +3,15 @@
  */
 
 @import "var";
-
-
-/**
- * Functions to reference arrays
- */
-
-@import "helper/function";
+@import "helper/variable-function";
 
 
 /**
  * Settings for specific components and utilities
  */
 
 @import "setting";
-
+@import "helper/setting-function";
 
 /**
  * Helper Mixins

src/scss/utility/_separator.scss

@@ -4,27 +4,29 @@
  * @since 3.0.0
  */
 
-.u-separator,
-%u-separator {
-    border: 1px solid color(neutral, light);
+@function seperator($seperator, $var: 'width') {
+    @return map-get(map-get($separators, $seperator), $var);
 }
 
-.u-separator-top,
-%u-separator-top {
-    border-top: 1px solid color(neutral, light);
-}
+$seperator-sides: (base, top, left, bottom, right);
 
-.u-separator-bottom,
-%u-separator-bottom {
-    border-bottom: 1px solid color(neutral, light);
-}
+@each $key, $value in $separators {
+    $class: 'u-separator-' + $key;
+    @if($key == base) {
+         $class: 'u-separator';
+    }
 
-.u-separator-left,
-%u-separator-left {
-    border-left: 1px solid color(neutral, light);
+    @each $side in $seperator-sides {
+        @if($side == base) {
+            .#{$class},
+            %#{$class} {
+                border: seperator($key, width) seperator($key, style) seperator($key, color);
+            }
+        } @else {
+            .#{$class}-#{$side},
+            %#{$class}-#{$side} {
+                border-#{$side}: seperator($key, width) seperator($key, style) seperator($key, color);
+            }
+        }
+    }
 }
-
-.u-separator-right,
-%u-separator-right {
-    border-right: 1px solid color(neutral, light);
-}