feat(plugin-basic-ui): Expose edge width customization interface (#652)

Author: FutureSeller

.changeset/slow-trees-hunt.md

@@ -0,0 +1,5 @@
+---
+"@stackflow/plugin-basic-ui": minor
+---
+
+Expose interfaces to modify width of edge

extensions/plugin-basic-ui/src/basicUIPlugin.css.ts

@@ -43,6 +43,9 @@ const GLOBAL_VARS = {
     borderRadius: "modal-border-radius",
     maxWidth: "modal-max-width",
   },
+  edge: {
+    width: 'edge-width',
+  }
 };
 
 export const globalVars = createGlobalThemeContract(
@@ -88,6 +91,9 @@ const androidValues: GlobalVars = {
     borderRadius: "1rem",
     maxWidth: "100%",
   },
+  edge: {
+    width: "1.25rem",
+  }
 };
 
 const cupertinoValues: GlobalVars = {

extensions/plugin-basic-ui/src/basicUIPlugin.tsx

@@ -69,8 +69,7 @@ export const basicUIPlugin: (
               [css.globalVars.backgroundColor]: _options.backgroundColor,
               [css.globalVars.backgroundImage]: _options.backgroundImage,
               [css.globalVars.dimBackgroundColor]: _options.dimBackgroundColor,
-              [css.globalVars.transitionDuration]:
-                `${stack.transitionDuration}ms`,
+              [css.globalVars.transitionDuration]: `${stack.transitionDuration}ms`,
               [css.globalVars.computedTransitionDuration]:
                 stack.globalTransitionState === "loading"
                   ? `${stack.transitionDuration}ms`
@@ -91,7 +90,8 @@ export const basicUIPlugin: (
               [css.globalVars.appBar.lineHeight]: _options.appBar?.lineHeight,
               [css.globalVars.appBar.hitSlop]: _options.appBar?.hitSlop,
               [css.globalVars.appBar.itemGap]: _options.appBar?.itemGap,
-            }),
+              [css.globalVars.edge.width]: _options.edge?.width,
+            })
           )}
         >
           {stack.render()}

extensions/plugin-basic-ui/src/components/AppScreen.css.ts

@@ -195,7 +195,7 @@ export const edge = recipe({
     f.left0,
     f.fullHeight,
     {
-      width: "1.25rem",
+      width: globalVars.edge.width,
       zIndex: vars.zIndexes.edge,
     },
   ],