Merge pull request #588 from HelixDesignSystem/surf-1894-deprecate-box-less-mixins

refactor(styles): deprecate box LESS mixins for SCSS mixins

Author: 100stacks

src/less/components/box/index.less

@@ -1,5 +1,9 @@
 @import (reference) 'vars';
 
+/// ======================================== ///
+/// MIXINS - DEPRECATED! Use SCSS instead!   ///
+/// ======================================== ///
+
 // TODO: refactor and find a better home for this mixin
 #HXDiv {
   .shadyRoot(@rules) {

src/scss/components/_index.scss

@@ -1,6 +1,7 @@
 // TODO: migrate components from LESS
 @import "accordion/index";
 @import "alert/index";
+@import "box/index";
 @import "loader/index";
 @import "selector-strip/index";
 @import "typography/index";

src/scss/components/box/_index.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+// TODO: convert remaining LESS styles

src/scss/components/box/_mixins.scss

@@ -0,0 +1,19 @@
+@import "vars";
+
+// TODO: refactor and find a better home for this mixin
+@mixin hxDiv-shadyRoot { // less: #HXDiv.shadyRoot({...})
+  > #hxDiv {
+    @content;
+  }
+}
+
+// less: #Box.xs()    -> hxBox(xs)
+// less: #Box.sm()    -> hxBox(sm)
+// less: #Box.md()    -> hxBox(md) or box() or box
+// less: #Box.lg()    -> hxBox(lg)
+// less: #Box.xl()    -> hxBox(xl)
+// less: #Box.xxl()   -> hxBox(xxl)
+// less: #Box.flush() -> hxBox(flush)
+@mixin hxBox($size: md) {
+  padding: map-get($space, $size);
+}