@stackflow/plugin-basic-ui 1.16.1 → 1.18.0

package/src/components/AppBar.tsx

@@ -33,6 +33,12 @@ export type AppBarProps = Partial<
     | "backgroundColorTransitionDuration"
     | "backgroundImage"
     | "backgroundImageTransitionDuration"
+    | "minHeight"
+    | "fontSize"
+    | "lineHeight"
+    | "hitSlop"
+    | "containerPadding"
+    | "itemGap"
   >
 > & {
   title?: React.ReactNode;
@@ -93,6 +99,12 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
       onTopClick,
       enterStyle,
       className,
+      minHeight,
+      fontSize,
+      lineHeight,
+      hitSlop,
+      containerPadding,
+      itemGap,
     },
     ref,
   ) => {
@@ -323,6 +335,12 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
             [globalVars.appBar.backgroundImageTransitionDuration]:
               backgroundImageTransitionDuration,
             [appScreenCss.vars.appBar.center.mainWidth]: `${maxWidth}px`,
+            [globalVars.appBar.minHeight]: minHeight,
+            [globalVars.appBar.containerPadding]: containerPadding,
+            [globalVars.appBar.fontSize]: fontSize,
+            [globalVars.appBar.hitSlop]: hitSlop,
+            [globalVars.appBar.lineHeight]: lineHeight,
+            [globalVars.appBar.itemGap]: itemGap,
           }),
         )}
         data-part="appBar"

package/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)))`,
-              },
-            },
-          },
         },
       ],
     },
@@ -195,15 +198,15 @@ export const edge = recipe({
     f.left0,
     f.fullHeight,
     {
-      width: "1.25rem",
+      width: globalVars.edge.width,
       zIndex: vars.zIndexes.edge,
     },
   ],
   variants: {
     hasAppBar: {
       true: {
-        top: globalVars.appBar.height,
-        height: `calc(100% - ${globalVars.appBar.height})`,
+        top: vars.appBar.topMargin,
+        height: `calc(100% - ${vars.appBar.topMargin})`,
       },
     },
   },

package/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"