add support for elliptical radius on ellipse border radius

Author: softmarshmallow

packages/builder-css-styles/border-radius/index.ts

@@ -60,10 +60,11 @@ export function borderRadius(r: BorderRadiusManifest): CSSProperties {
         "border-radius": px(r.all),
       };
     } else {
-      console.warn("elliptical border radius not supported");
+      // example - https://codepen.io/Mahe76/pen/ExZbdro
       return {
-        "border-radius": px(r.all.x),
+        "border-radius": `${px(r.all.x)} / ${px(r.all.y)}`,
       };
+      // TODO: support short handed version - `50%`
     }
   } else {
     return {

packages/designto-token/token-container/index.ts

@@ -4,7 +4,7 @@ import { tokenizeBackground } from "../token-background";
 import { BoxShape } from "@reflect-ui/core/lib/box-shape";
 import { keyFromNode } from "../key";
 import { tokenizeBorder } from "../token-border";
-import { BoxShadowManifest } from "@reflect-ui/core";
+import { BorderRadius, BoxShadowManifest } from "@reflect-ui/core";
 
 function fromRectangle(rect: nodes.ReflectRectangleNode): core.Container {
   const container = new core.Container({
@@ -30,7 +30,7 @@ function fromEllipse(ellipse: nodes.ReflectEllipseNode): core.Container {
     height: ellipse.height,
     boxShadow: ellipse.shadows as BoxShadowManifest[],
     border: tokenizeBorder.fromNode(ellipse),
-    borderRadius: { all: Math.max(ellipse.width, ellipse.height) / 2 },
+    borderRadius: BorderRadius.all({ x: ellipse.width, y: ellipse.height }), // this is equivalant to css "50%"
     background: tokenizeBackground.fromFills(ellipse.fills),
   });