Modify options for align/justify content for closer parity with CSS

Author: ggdouglas

packages/core/src/components/box/boxProps.ts

@@ -80,14 +80,14 @@ export type Height = SizeRange | `${SizeRange}` | "auto";
  */
 export type AlignContent =
     | "start"
-    | "end"
     | "center"
-    | "between"
-    | "around"
-    | "evenly"
+    | "end"
+    | "space-between"
+    | "space-around"
+    | "space-evenly"
+    | "stretch"
     | "normal"
-    | "baseline"
-    | "stretch";
+    | "baseline";
 
 /**
  * The range of values for `align-items`.
@@ -148,7 +148,15 @@ export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
  */
-export type JustifyContent = "start" | "end" | "center" | "between" | "around" | "evenly" | "normal" | "stretch";
+export type JustifyContent =
+    | "start"
+    | "center"
+    | "end"
+    | "space-between"
+    | "space-around"
+    | "space-evenly"
+    | "stretch"
+    | "normal";
 
 /**
  * The range of values for `justify-items`.

packages/core/src/components/box/buildStyles.ts

@@ -130,14 +130,14 @@ const insetLeft = appendValue<Inset>("inset-left");
 
 const alignContent = mapping<AlignContent>({
     start: "content-start",
-    end: "content-end",
     center: "content-center",
-    between: "content-between",
-    around: "content-around",
-    evenly: "content-evenly",
+    end: "content-end",
+    "space-between": "content-between",
+    "space-around": "content-around",
+    "space-evenly": "content-evenly",
+    stretch: "content-stretch",
     normal: "content-normal",
     baseline: "content-baseline",
-    stretch: "content-stretch",
 });
 
 const alignItems = mapping<AlignItems>({
@@ -194,11 +194,11 @@ const flexWrap = mapping<FlexWrap>({
 
 const justifyContent = mapping<JustifyContent>({
     start: "justify-start",
-    end: "justify-end",
     center: "justify-center",
-    between: "justify-between",
-    around: "justify-around",
-    evenly: "justify-evenly",
+    end: "justify-end",
+    "space-between": "justify-between",
+    "space-around": "justify-around",
+    "space-evenly": "justify-evenly",
     normal: "justify-normal",
     stretch: "justify-stretch",
 });