feat(plugin-basic-ui): minSafeAreaInsetTop (#402)

daangn · Jul 18, 2023 · da0f34b · da0f34b · vercel · Jul 18, 2023
1 parent 0a19864
commit da0f34b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts
@@ -27,6 +27,7 @@ export const globalVars = createGlobalThemeContract(
       backgroundColorTransitionDuration:
         "app-bar-background-color-transition-duration",
       overflow: "app-bar-overflow",
+      minSafeAreaInsetTop: "app-bar-min-safe-area-inset-top",
     },
     bottomSheet: {
       borderRadius: "bottom-sheet-border-radius",
@@ -60,6 +61,7 @@ const androidValues: GlobalVars = {
     backgroundColor: "#fff",
     backgroundColorTransitionDuration: "0s",
     overflow: "hidden",
+    minSafeAreaInsetTop: "0px",
   },
   bottomSheet: {
     borderRadius: "1rem",

diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.tsx b/extensions/plugin-basic-ui/src/basicUIPlugin.tsx
@@ -80,6 +80,8 @@ export const basicUIPlugin: (
               [css.globalVars.appBar.height]: _options.appBar?.height,
               [css.globalVars.appBar.iconColor]: _options.appBar?.iconColor,
               [css.globalVars.appBar.textColor]: _options.appBar?.textColor,
+              [css.globalVars.appBar.minSafeAreaInsetTop]:
+                _options.appBar?.minSafeAreaInsetTop,
               [css.globalVars.bottomSheet.borderRadius]:
                 _options.bottomSheet?.borderRadius,
               [css.globalVars.modal.borderRadius]: _options.modal?.borderRadius,

diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts
@@ -108,7 +108,10 @@ export const appBar = recipe({
 });
 
 export const safeArea = style({
-  height: ["constant(safe-area-inset-top)", "env(safe-area-inset-top)"],
+  height: [
+    `max(${globalVars.appBar.minSafeAreaInsetTop}, constant(safe-area-inset-top))`,
+    `max(${globalVars.appBar.minSafeAreaInsetTop}, env(safe-area-inset-top))`,
+  ],
 });
 
 export const container = style([
@@ -191,7 +194,10 @@ export const centerMain = recipe({
         left: "50%",
         transform: "translate(-50%)",
         height: globalVars.appBar.height,
-        top: ["constant(safe-area-inset-top)", "env(safe-area-inset-top)"],
+        top: [
+          `max(${globalVars.appBar.minSafeAreaInsetTop}, constant(safe-area-inset-top))`,
+          `max(${globalVars.appBar.minSafeAreaInsetTop}, env(safe-area-inset-top))`,
+        ],
       },
     },
   },

diff --git a/extensions/plugin-basic-ui/src/components/AppScreen.css.ts b/extensions/plugin-basic-ui/src/components/AppScreen.css.ts
@@ -125,10 +125,10 @@ export const paper = recipe({
           paddingTop: globalVars.appBar.height,
           "@supports": {
             "(padding-top: constant(safe-area-inset-top))": {
-              paddingTop: `calc(${globalVars.appBar.height} + constant(safe-area-inset-top))`,
+              paddingTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, constant(safe-area-inset-top)))`,
             },
             "(padding-top: env(safe-area-inset-top))": {
-              paddingTop: `calc(${globalVars.appBar.height} + env(safe-area-inset-top))`,
+              paddingTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.minSafeAreaInsetTop}, env(safe-area-inset-top)))`,
             },
           },
         },