feat(plugin-basic-ui): Expose <AppBar> sizing related style customization interfaces (#648)

Co-authored-by: anakin_karrot <anakin@daangn.com>

Author: ENvironmentSet

.changeset/clean-points-cross.md

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

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

@@ -30,6 +30,11 @@ const GLOBAL_VARS = {
       "app-bar-background-image-transition-duration",
     overflow: "app-bar-overflow",
     minSafeAreaInsetTop: "app-bar-min-safe-area-inset-top",
+    containerPadding: "app-bar-container-padding",
+    itemGap: "app-bar-item-gap",
+    fontSize: "app-bar-font-size",
+    lineHeight: "app-bar-line-height",
+    hitSlop: "app-bar-hit-slop",
   },
   bottomSheet: {
     borderRadius: "bottom-sheet-border-radius",
@@ -70,6 +75,11 @@ const androidValues: GlobalVars = {
     backgroundImageTransitionDuration: "0s",
     overflow: "hidden",
     minSafeAreaInsetTop: "0px",
+    containerPadding: "1rem",
+    itemGap: "1rem",
+    fontSize: "1.125rem",
+    hitSlop: "0.5rem",
+    lineHeight: "1.5",
   },
   bottomSheet: {
     borderRadius: "1rem",
@@ -87,6 +97,7 @@ const cupertinoValues: GlobalVars = {
     height: "2.75rem",
     minHeight: "2.75rem",
     borderSize: "0.5px",
+    lineHeight: "normal",
   },
 };
 

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

@@ -85,6 +85,12 @@ export const basicUIPlugin: (
               [css.globalVars.bottomSheet.borderRadius]:
                 _options.bottomSheet?.borderRadius,
               [css.globalVars.modal.borderRadius]: _options.modal?.borderRadius,
+              [css.globalVars.appBar.containerPadding]:
+                _options.appBar?.containerPadding,
+              [css.globalVars.appBar.fontSize]: _options.appBar?.fontSize,
+              [css.globalVars.appBar.lineHeight]: _options.appBar?.lineHeight,
+              [css.globalVars.appBar.hitSlop]: _options.appBar?.hitSlop,
+              [css.globalVars.appBar.itemGap]: _options.appBar?.itemGap,
             }),
           )}
         >

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

@@ -200,7 +200,8 @@ export const container = style([
     }),
     selectors: {
       [`${android} &`]: {
-        padding: "0 1rem",
+        paddingLeft: globalVars.appBar.containerPadding,
+        paddingRight: globalVars.appBar.containerPadding,
       },
     },
   },
@@ -211,16 +212,13 @@ export const left = style([
   f.fullHeight,
   appBarMinHeight,
   {
+    paddingRight: globalVars.appBar.itemGap,
     ":empty": {
       display: "none",
     },
     selectors: {
-      [`${android} &`]: {
-        paddingRight: "1rem",
-      },
       [`${cupertino} &`]: {
-        paddingLeft: "1rem",
-        paddingRight: "1rem",
+        paddingLeft: globalVars.appBar.containerPadding,
       },
     },
   },
@@ -237,8 +235,8 @@ export const backButton = style([
       opacity: "300ms",
       color: globalVars.appBar.iconColorTransitionDuration,
     }),
-    padding: ".5rem",
-    margin: "-.5rem",
+    padding: globalVars.appBar.hitSlop,
+    margin: `calc(-1 * ${globalVars.appBar.hitSlop})`,
     ":active": {
       opacity: "0.2",
       transition: transitions({
@@ -254,8 +252,11 @@ export const closeButton = style([backButton]);
 export const center = style([f.flexAlignCenter, f.flex1, appBarMinHeight]);
 
 export const centerMain = style({
-  width: vars.appBar.center.mainWidth,
+  display: "flex",
   color: globalVars.appBar.textColor,
+  fontSize: globalVars.appBar.fontSize,
+  lineHeight: globalVars.appBar.lineHeight,
+  fontWeight: "bold",
   transition: transitions({
     height: globalVars.appBar.heightTransitionDuration,
     color: globalVars.appBar.textColorTransitionDuration,
@@ -264,20 +265,15 @@ export const centerMain = style({
     [`${android} &`]: {
       width: "100%",
       justifyContent: "flex-start",
-      fontSize: "1.125rem",
-      lineHeight: "1.5",
-      fontWeight: "bold",
       boxSizing: "border-box",
     },
     [`${cupertino} &`]: {
+      width: vars.appBar.center.mainWidth,
       position: "absolute",
-      display: "flex",
       alignItems: "center",
       justifyContent: "center",
       textAlign: "center",
       fontFamily: "-apple-system, BlinkMacSystemFont",
-      fontWeight: "bold",
-      fontSize: "1.125rem",
       left: "50%",
       transform: "translate(-50%)",
       height: globalVars.appBar.height,
@@ -296,9 +292,9 @@ export const centerMainEdge = style([
   f.cursorPointer,
   {
     left: "50%",
-    height: "1.25rem",
+    height: globalVars.appBar.fontSize,
     transform: "translate(-50%)",
-    maxWidth: "5rem",
+    maxWidth: `calc(${globalVars.appBar.fontSize} * 5)`,
     display: "none",
     width: vars.appBar.center.mainWidth,
     selectors: {
@@ -326,17 +322,13 @@ export const right = style([
   f.posRel,
   appBarMinHeight,
   {
-    marginLeft: "auto",
+    paddingLeft: globalVars.appBar.itemGap,
     ":empty": {
       display: "none",
     },
     selectors: {
-      [`${android} &`]: {
-        paddingLeft: "1rem",
-      },
       [`${cupertino} &`]: {
-        paddingLeft: "1rem",
-        paddingRight: "1rem",
+        paddingRight: globalVars.appBar.containerPadding,
       },
     },
   },

extensions/plugin-basic-ui/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"