The one that updates spacing and color functions (#1258)

* updates spacing and color functions

* sorts lists in changelog

* adds spacing file to the functions

* adds the spacing function sass file

components/vf-sass-config/CHANGELOG.md

@@ -1,3 +1,9 @@
+### 2.3.0
+
+* introduces a `space` Sass function to save the keystrokes.
+  * instead of typeing `map-get($vf-spacing-map, vf-spacing--400)` you can write `spacing(400)` for the same result.
+* I've added this terse naming of the function for `set-color` and `set-ui-color` to be something like `color(green)` instead of `set-color(vf-color--green)`. The old way still works.
+
 ### 2.2.1
 
 * fixes bug where `--page-grid-gap` wasn't getting it's correct spacing unit because the Sass `map-get` was not interpolated.

components/vf-sass-config/functions/_set-color.scss

@@ -7,3 +7,14 @@
 @function set-ui-color($color-name) {
   @return map-get($vf-ui-colors-map, $color-name);
 }
+
+
+@function color($color-name) {
+  $value: "vf-color--" + $color-name;
+  @return map-get($vf-colors-map, $value);
+}
+
+@function ui-color($color-name) {
+  $value: "vf-ui-color--" + $color-name;
+  @return map-get($vf-ui-colors-map, $value);
+}

components/vf-sass-config/functions/_set-spacing.scss

@@ -0,0 +1,4 @@
+@function space($spacing-value) {
+  $value: "vf-spacing--" + $spacing-value;
+  @return map-get($vf-spacing-map, $value);
+}

components/vf-sass-config/functions/vf-functions.scss

@@ -1,5 +1,7 @@
 @import 'map-deep-get';
 @import 'string-replace';
 @import 'set-color';
+@import 'set-spacing';
 @import 'set-layer';
 @import 'theme';
+