feat(plugin-basic-ui): Parameterize appscreen dim height, appscreen default transition offset

.changeset/real-swans-tickle.md

@@ -0,0 +1,5 @@
+---
+"@stackflow/plugin-basic-ui": patch
+---
+
+Fix edge height

.changeset/thirty-melons-invite.md

@@ -0,0 +1,5 @@
+---
+"@stackflow/plugin-basic-ui": minor
+---
+
+Parameterize default appscreen transition offset and appscreen dim height

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

@@ -9,8 +9,10 @@ const GLOBAL_VARS = {
   backgroundColor: "background-color",
   backgroundImage: "background-image",
   dimBackgroundColor: "dim-background-color",
+  dimHeight: "dim-height",
   transitionDuration: "transition-duration",
   computedTransitionDuration: "computed-transition-duration",
+  defaultTransitionOffSet: "default-transition-off-set",
   appBar: {
     borderColor: "app-bar-border-color",
     borderColorTransitionDuration: "app-bar-border-color-transition-duration",
@@ -56,8 +58,10 @@ const androidValues: GlobalVars = {
   backgroundColor: "#fff",
   backgroundImage: "unset",
   dimBackgroundColor: "rgba(0, 0, 0, 0.15)",
+  dimHeight: "10rem",
   transitionDuration: "0s",
   computedTransitionDuration: "0s",
+  defaultTransitionOffSet: "10rem",
   appBar: {
     borderColor: "rgba(0, 0, 0, 0.07)",
     borderColorTransitionDuration: "0s",
@@ -92,6 +96,8 @@ const androidValues: GlobalVars = {
 
 const cupertinoValues: GlobalVars = {
   ...androidValues,
+  dimHeight: "100%",
+  defaultTransitionOffSet: "100%",
   appBar: {
     ...androidValues.appBar,
     height: "2.75rem",

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

@@ -69,12 +69,15 @@ export const basicUIPlugin: (
               [css.globalVars.backgroundColor]: _options.backgroundColor,
               [css.globalVars.backgroundImage]: _options.backgroundImage,
               [css.globalVars.dimBackgroundColor]: _options.dimBackgroundColor,
+              [css.globalVars.dimHeight]: _options.dimHeight,
               [css.globalVars.transitionDuration]:
                 `${stack.transitionDuration}ms`,
               [css.globalVars.computedTransitionDuration]:
                 stack.globalTransitionState === "loading"
                   ? `${stack.transitionDuration}ms`
                   : "0ms",
+              [css.globalVars.defaultTransitionOffSet]:
+                _options.defaultTransitionOffSet,
               [css.globalVars.appBar.borderColor]: _options.appBar?.borderColor,
               [css.globalVars.appBar.borderSize]: _options.appBar?.borderSize,
               [css.globalVars.appBar.height]: _options.appBar?.height,

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

@@ -45,15 +45,15 @@ export const appBar = recipe({
           position: "absolute",
         },
         [`${cupertino} ${exitActive} &`]: {
-          transform: "translate3d(100%, 0, 0)",
+          transform: `translate3d(${globalVars.defaultTransitionOffSet}, 0, 0)`,
           transition: transitions({
             ...appBarCommonTransition,
             transform: "0s",
           }),
         },
         [`${android} &`]: {
           opacity: 0,
-          transform: "translate3d(0, 10rem, 0)",
+          transform: `translate3d(0, ${globalVars.defaultTransitionOffSet}, 0)`,
           transition: transitions({
             ...appBarCommonTransition,
             transform: vars.transitionDuration,

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

@@ -49,6 +49,33 @@ export const appScreen = recipe({
       "exit-active": exitActive,
       "exit-done": exitDone,
     },
+    hasAppBar: {
+      true: {
+        vars: {
+          [vars.appBar.topMargin]: globalVars.appBar.height,
+        },
+        /**
+         * When `max()` and `env()` (or `constant()`) supported
+         *
+         * - https://caniuse.com/css-env-function
+         * - https://caniuse.com/css-math-functions
+         */
+        "@supports": {
+          "(padding: max(0px)) and (padding: constant(safe-area-inset-top))": {
+            vars: {
+              [vars.appBar.topMargin]:
+                `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, constant(safe-area-inset-top)))`,
+            },
+          },
+          "(padding: max(0px)) and (padding: env(safe-area-inset-top))": {
+            vars: {
+              [vars.appBar.topMargin]:
+                `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, env(safe-area-inset-top)))`,
+            },
+          },
+        },
+      },
+    },
   },
 });
 
@@ -59,9 +86,9 @@ export const dim = style([
   {
     opacity: 0,
     zIndex: vars.zIndexes.dim,
+    height: globalVars.dimHeight,
     selectors: {
       [`${android} &`]: {
-        height: "10rem",
         background: `linear-gradient(${globalVars.dimBackgroundColor}, rgba(0, 0, 0, 0))`,
       },
       [`
@@ -89,7 +116,7 @@ export const paper = recipe({
       zIndex: vars.zIndexes.paper,
       selectors: {
         [`${cupertino} &`]: {
-          transform: "translate3d(100%, 0, 0)",
+          transform: `translate3d(${globalVars.defaultTransitionOffSet}, 0, 0)`,
         },
         [`
           ${cupertino} ${enterActive} &,
@@ -99,7 +126,7 @@ export const paper = recipe({
         },
         [`${android} &`]: {
           opacity: 0,
-          transform: "translate3d(0, 10rem, 0)",
+          transform: `translate3d(0, ${globalVars.defaultTransitionOffSet}, 0)`,
         },
         [`
           ${android} ${enterActive} &,
@@ -118,30 +145,6 @@ export const paper = recipe({
         {
           transition: `transform ${vars.transitionDuration}, opacity ${vars.transitionDuration}, margin-top ${globalVars.appBar.heightTransitionDuration}`,
           paddingTop: vars.appBar.topMargin,
-          vars: {
-            [vars.appBar.topMargin]: globalVars.appBar.height,
-          },
-          /**
-           * When `max()` and `env()` (or `constant()`) supported
-           *
-           * - https://caniuse.com/css-env-function
-           * - https://caniuse.com/css-math-functions
-           */
-          "@supports": {
-            "(padding: max(0px)) and (padding: constant(safe-area-inset-top))":
-              {
-                vars: {
-                  [vars.appBar.topMargin]:
-                    `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, constant(safe-area-inset-top)))`,
-                },
-              },
-            "(padding: max(0px)) and (padding: env(safe-area-inset-top))": {
-              vars: {
-                [vars.appBar.topMargin]:
-                  `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, env(safe-area-inset-top)))`,
-              },
-            },
-          },
         },
       ],
     },
@@ -202,8 +205,8 @@ export const edge = recipe({
   variants: {
     hasAppBar: {
       true: {
-        top: globalVars.appBar.height,
-        height: `calc(100% - ${globalVars.appBar.height})`,
+        top: vars.appBar.topMargin,
+        height: `calc(100% - ${vars.appBar.topMargin})`,
       },
     },
   },

extensions/plugin-basic-ui/src/components/AppScreen.tsx

@@ -237,6 +237,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
         ref={appScreenRef}
         className={clsx(
           css.appScreen({
+            hasAppBar,
             transitionState:
               transitionState === "enter-done" ||
               transitionState === "exit-done"