chore(stack): removed mixins, created new tokens for justify and alig…

…nment

src/lib/core/styles/tokens/stack/_tokens.scss

@@ -5,6 +5,8 @@ $tokens: (
   gap: utils.module-val(stack, gap, 16px),
   height: utils.module-val(stack, height, null),
   stretch: utils.module-val(stack, stretch, initial),
+  alignment: utils.module-val(stack, alignment, normal),
+  justify: utils.module-val(stack, justify, normal),
   wrap: utils.module-val(stack, wrap, wrap),
 ) !default;
 

src/lib/stack/_core.scss

@@ -4,6 +4,8 @@
 @mixin base() {
   display: flex;
   flex-direction: column;
+  align-items: #{token(alignment)};
+  justify-content: #{token(justify)};
   gap: #{token(gap)};
   height: #{token(height)};
   width: 100%;
@@ -19,28 +21,4 @@
 
 @mixin wrap() {
   flex-wrap: wrap;
-}
-
-@mixin justify-start() {
-  justify-content: start;
-}
-
-@mixin justify-center() {
-  justify-content: center;
-}
-
-@mixin justify-end() {
-  justify-content: end;
-}
-
-@mixin align-start() {
-  align-items: start;
-}
-
-@mixin align-center() {
-  align-items: center;
-}
-
-@mixin align-end() {
-  align-items: end;
 }

src/lib/stack/stack.scss

@@ -31,37 +31,36 @@
 
 :host([alignment=start]) {
   .forge-stack {
-    //override stretch css prop
-    @include align-start;
+    @include override(alignment, start, value);
   }
 }
 
 :host([alignment=center]) {
   .forge-stack {
-    @include align-center;
+    @include override(alignment, center, value);
   }
 }
 
 :host([alignment=end]) {
   .forge-stack {
-    @include align-end;
+    @include override(alignment, end, value);
   }
 }
 
 :host([justify=start]) {
   .forge-stack {
-    @include justify-start;
+    @include override(justify, start, value);
   }
 }
 
 :host([justify=center]) {
   .forge-stack {
-    @include justify-center;
+    @include override(justify, center, value);
   }
 }
 
 :host([justify=end]) {
   .forge-stack {
-    @include justify-end;
+    @include override(justify, end, value);
   }
 }