From b126371977b4eb69b1a87ffc0725d74cca19ceb5 Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Thu, 20 Nov 2025 16:36:57 +0900 Subject: [PATCH 01/17] Open minHeight option --- extensions/plugin-basic-ui/src/components/AppBar.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/extensions/plugin-basic-ui/src/components/AppBar.tsx b/extensions/plugin-basic-ui/src/components/AppBar.tsx index 1936ff693..86ca15a5a 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.tsx +++ b/extensions/plugin-basic-ui/src/components/AppBar.tsx @@ -33,6 +33,7 @@ export type AppBarProps = Partial< | "backgroundColorTransitionDuration" | "backgroundImage" | "backgroundImageTransitionDuration" + | "minHeight" > > & { title?: React.ReactNode; @@ -93,6 +94,7 @@ const AppBar = forwardRef( onTopClick, enterStyle, className, + minHeight, }, ref, ) => { @@ -323,6 +325,7 @@ const AppBar = forwardRef( [globalVars.appBar.backgroundImageTransitionDuration]: backgroundImageTransitionDuration, [appScreenCss.vars.appBar.center.mainWidth]: `${maxWidth}px`, + [globalVars.appBar.minHeight]: minHeight, }), )} data-part="appBar" From 453cab0ff1301c9b4d822fb3cc98c322c81a7428 Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Thu, 20 Nov 2025 17:08:26 +0900 Subject: [PATCH 02/17] move padding to container --- .../src/components/AppBar.css.ts | 26 +++---------------- 1 file changed, 3 insertions(+), 23 deletions(-) diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts index 063bc95fa..2a7984cc4 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.css.ts +++ b/extensions/plugin-basic-ui/src/components/AppBar.css.ts @@ -198,11 +198,7 @@ export const container = style([ transition: transitions({ height: globalVars.appBar.heightTransitionDuration, }), - selectors: { - [`${android} &`]: { - padding: "0 1rem", - }, - }, + padding: "0 1rem", }, ]); @@ -211,18 +207,10 @@ export const left = style([ f.fullHeight, appBarMinHeight, { + paddingRight: "1rem", ":empty": { display: "none", }, - selectors: { - [`${android} &`]: { - paddingRight: "1rem", - }, - [`${cupertino} &`]: { - paddingLeft: "1rem", - paddingRight: "1rem", - }, - }, }, ]); @@ -327,17 +315,9 @@ export const right = style([ appBarMinHeight, { marginLeft: "auto", + paddingLeft: "1rem", ":empty": { display: "none", }, - selectors: { - [`${android} &`]: { - paddingLeft: "1rem", - }, - [`${cupertino} &`]: { - paddingLeft: "1rem", - paddingRight: "1rem", - }, - }, }, ]); From 54bbf0559019d957879e2e3d6c75bc2745ec9372 Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Thu, 20 Nov 2025 17:12:01 +0900 Subject: [PATCH 03/17] make global padding customizable --- extensions/plugin-basic-ui/src/basicUIPlugin.css.ts | 2 ++ extensions/plugin-basic-ui/src/components/AppBar.css.ts | 3 ++- extensions/plugin-basic-ui/src/components/AppBar.tsx | 3 +++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts index cda84caa0..e017778d6 100644 --- a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts +++ b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts @@ -30,6 +30,7 @@ const GLOBAL_VARS = { "app-bar-background-image-transition-duration", overflow: "app-bar-overflow", minSafeAreaInsetTop: "app-bar-min-safe-area-inset-top", + wrappingInlinePadding: "app-bar-wrapping-inline-padding", }, bottomSheet: { borderRadius: "bottom-sheet-border-radius", @@ -70,6 +71,7 @@ const androidValues: GlobalVars = { backgroundImageTransitionDuration: "0s", overflow: "hidden", minSafeAreaInsetTop: "0px", + wrappingInlinePadding: "1rem", }, bottomSheet: { borderRadius: "1rem", diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts index 2a7984cc4..566d697ea 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.css.ts +++ b/extensions/plugin-basic-ui/src/components/AppBar.css.ts @@ -198,7 +198,8 @@ export const container = style([ transition: transitions({ height: globalVars.appBar.heightTransitionDuration, }), - padding: "0 1rem", + paddingLeft: globalVars.appBar.wrappingInlinePadding, + paddingRight: globalVars.appBar.wrappingInlinePadding, }, ]); diff --git a/extensions/plugin-basic-ui/src/components/AppBar.tsx b/extensions/plugin-basic-ui/src/components/AppBar.tsx index 86ca15a5a..0db0e5ff8 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.tsx +++ b/extensions/plugin-basic-ui/src/components/AppBar.tsx @@ -34,6 +34,7 @@ export type AppBarProps = Partial< | "backgroundImage" | "backgroundImageTransitionDuration" | "minHeight" + | "wrappingInlinePadding" > > & { title?: React.ReactNode; @@ -95,6 +96,7 @@ const AppBar = forwardRef( enterStyle, className, minHeight, + wrappingInlinePadding, }, ref, ) => { @@ -326,6 +328,7 @@ const AppBar = forwardRef( backgroundImageTransitionDuration, [appScreenCss.vars.appBar.center.mainWidth]: `${maxWidth}px`, [globalVars.appBar.minHeight]: minHeight, + [globalVars.appBar.wrappingInlinePadding]: wrappingInlinePadding, }), )} data-part="appBar" From c058d9b7697bca31a9adb71750605104511d0496 Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Thu, 20 Nov 2025 17:30:01 +0900 Subject: [PATCH 04/17] remove meaningless margin-left --- extensions/plugin-basic-ui/src/components/AppBar.css.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts index 566d697ea..9704982c7 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.css.ts +++ b/extensions/plugin-basic-ui/src/components/AppBar.css.ts @@ -315,7 +315,6 @@ export const right = style([ f.posRel, appBarMinHeight, { - marginLeft: "auto", paddingLeft: "1rem", ":empty": { display: "none", From 8b970d78557dbbdddcb24050e803dc7cec3a5cfb Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Thu, 20 Nov 2025 19:27:47 +0900 Subject: [PATCH 05/17] propagate padding --- extensions/plugin-basic-ui/src/components/AppBar.css.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts index 9704982c7..ffb996b2a 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.css.ts +++ b/extensions/plugin-basic-ui/src/components/AppBar.css.ts @@ -208,7 +208,7 @@ export const left = style([ f.fullHeight, appBarMinHeight, { - paddingRight: "1rem", + paddingRight: globalVars.appBar.wrappingInlinePadding, ":empty": { display: "none", }, @@ -315,7 +315,7 @@ export const right = style([ f.posRel, appBarMinHeight, { - paddingLeft: "1rem", + paddingLeft: globalVars.appBar.wrappingInlinePadding, ":empty": { display: "none", }, From b16d2deb48ab00fae1572f971aa6bbf1f7128fa3 Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Thu, 20 Nov 2025 19:30:10 +0900 Subject: [PATCH 06/17] touch area expansion --- extensions/plugin-basic-ui/src/basicUIPlugin.css.ts | 6 ++++++ extensions/plugin-basic-ui/src/components/AppBar.css.ts | 4 ++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts index e017778d6..7f5640ee0 100644 --- a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts +++ b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts @@ -31,6 +31,9 @@ const GLOBAL_VARS = { overflow: "app-bar-overflow", minSafeAreaInsetTop: "app-bar-min-safe-area-inset-top", wrappingInlinePadding: "app-bar-wrapping-inline-padding", + backButton: { + touchAreaExpansion: "app-bar-back-button-touch-area-expansion", + }, }, bottomSheet: { borderRadius: "bottom-sheet-border-radius", @@ -72,6 +75,9 @@ const androidValues: GlobalVars = { overflow: "hidden", minSafeAreaInsetTop: "0px", wrappingInlinePadding: "1rem", + backButton: { + touchAreaExpansion: "0.5rem", + }, }, bottomSheet: { borderRadius: "1rem", diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts index ffb996b2a..8301cb675 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.css.ts +++ b/extensions/plugin-basic-ui/src/components/AppBar.css.ts @@ -226,8 +226,8 @@ export const backButton = style([ opacity: "300ms", color: globalVars.appBar.iconColorTransitionDuration, }), - padding: ".5rem", - margin: "-.5rem", + padding: globalVars.appBar.backButton.touchAreaExpansion, + margin: `calc(-1 * ${globalVars.appBar.backButton.touchAreaExpansion})`, ":active": { opacity: "0.2", transition: transitions({ From d28278b936bdcd0b1cccc74c160ea1a66f4fda6e Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Thu, 20 Nov 2025 19:41:15 +0900 Subject: [PATCH 07/17] allow font-size fix --- extensions/plugin-basic-ui/src/basicUIPlugin.css.ts | 2 ++ .../plugin-basic-ui/src/components/AppBar.css.ts | 10 ++++------ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts index 7f5640ee0..2ebadd0bd 100644 --- a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts +++ b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts @@ -31,6 +31,7 @@ const GLOBAL_VARS = { overflow: "app-bar-overflow", minSafeAreaInsetTop: "app-bar-min-safe-area-inset-top", wrappingInlinePadding: "app-bar-wrapping-inline-padding", + fontSize: "app-bar-font-size", backButton: { touchAreaExpansion: "app-bar-back-button-touch-area-expansion", }, @@ -75,6 +76,7 @@ const androidValues: GlobalVars = { overflow: "hidden", minSafeAreaInsetTop: "0px", wrappingInlinePadding: "1rem", + fontSize: "1.125rem", backButton: { touchAreaExpansion: "0.5rem", }, diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts index 8301cb675..1912b296c 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.css.ts +++ b/extensions/plugin-basic-ui/src/components/AppBar.css.ts @@ -243,8 +243,10 @@ 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, + fontWeight: "bold", transition: transitions({ height: globalVars.appBar.heightTransitionDuration, color: globalVars.appBar.textColorTransitionDuration, @@ -253,20 +255,16 @@ 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, From f0d5f1e40a32933a1ff3094296c447142f0afb33 Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Thu, 20 Nov 2025 19:43:28 +0900 Subject: [PATCH 08/17] inject vars --- extensions/plugin-basic-ui/src/components/AppBar.css.ts | 4 ++-- extensions/plugin-basic-ui/src/components/AppBar.tsx | 7 +++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts index 1912b296c..05b6e38e3 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.css.ts +++ b/extensions/plugin-basic-ui/src/components/AppBar.css.ts @@ -226,8 +226,8 @@ export const backButton = style([ opacity: "300ms", color: globalVars.appBar.iconColorTransitionDuration, }), - padding: globalVars.appBar.backButton.touchAreaExpansion, - margin: `calc(-1 * ${globalVars.appBar.backButton.touchAreaExpansion})`, + padding: globalVars.appBar.backButtonTouchAreaExpansion, + margin: `calc(-1 * ${globalVars.appBar.backButtonTouchAreaExpansion})`, ":active": { opacity: "0.2", transition: transitions({ diff --git a/extensions/plugin-basic-ui/src/components/AppBar.tsx b/extensions/plugin-basic-ui/src/components/AppBar.tsx index 0db0e5ff8..fa39d11a1 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.tsx +++ b/extensions/plugin-basic-ui/src/components/AppBar.tsx @@ -35,6 +35,8 @@ export type AppBarProps = Partial< | "backgroundImageTransitionDuration" | "minHeight" | "wrappingInlinePadding" + | "fontSize" + | "backButtonTouchAreaExpansion" > > & { title?: React.ReactNode; @@ -97,6 +99,8 @@ const AppBar = forwardRef( className, minHeight, wrappingInlinePadding, + fontSize, + backButtonTouchAreaExpansion, }, ref, ) => { @@ -329,6 +333,9 @@ const AppBar = forwardRef( [appScreenCss.vars.appBar.center.mainWidth]: `${maxWidth}px`, [globalVars.appBar.minHeight]: minHeight, [globalVars.appBar.wrappingInlinePadding]: wrappingInlinePadding, + [globalVars.appBar.fontSize]: fontSize, + [globalVars.appBar.backButtonTouchAreaExpansion]: + backButtonTouchAreaExpansion, }), )} data-part="appBar" From 3d1f50203164ba67eb898e77ffbc69b5037f2b35 Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Thu, 20 Nov 2025 19:47:26 +0900 Subject: [PATCH 09/17] rename --- extensions/plugin-basic-ui/src/basicUIPlugin.css.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts index 2ebadd0bd..d225bcae6 100644 --- a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts +++ b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts @@ -32,9 +32,7 @@ const GLOBAL_VARS = { minSafeAreaInsetTop: "app-bar-min-safe-area-inset-top", wrappingInlinePadding: "app-bar-wrapping-inline-padding", fontSize: "app-bar-font-size", - backButton: { - touchAreaExpansion: "app-bar-back-button-touch-area-expansion", - }, + backButtonTouchAreaExpansion: "app-bar-back-button-touch-area-expansion", }, bottomSheet: { borderRadius: "bottom-sheet-border-radius", @@ -77,9 +75,7 @@ const androidValues: GlobalVars = { minSafeAreaInsetTop: "0px", wrappingInlinePadding: "1rem", fontSize: "1.125rem", - backButton: { - touchAreaExpansion: "0.5rem", - }, + backButtonTouchAreaExpansion: "0.5rem", }, bottomSheet: { borderRadius: "1rem", From 12e13e54438abb006f842619417bab03fb7bccd2 Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Thu, 20 Nov 2025 22:57:58 +0900 Subject: [PATCH 10/17] revert unification --- .../src/components/AppBar.css.ts | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts index 05b6e38e3..056a9a8e5 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.css.ts +++ b/extensions/plugin-basic-ui/src/components/AppBar.css.ts @@ -198,8 +198,12 @@ export const container = style([ transition: transitions({ height: globalVars.appBar.heightTransitionDuration, }), - paddingLeft: globalVars.appBar.wrappingInlinePadding, - paddingRight: globalVars.appBar.wrappingInlinePadding, + selectors: { + [`${android} &`]: { + paddingLeft: globalVars.appBar.wrappingInlinePadding, + paddingRight: globalVars.appBar.wrappingInlinePadding, + }, + }, }, ]); @@ -208,10 +212,18 @@ export const left = style([ f.fullHeight, appBarMinHeight, { - paddingRight: globalVars.appBar.wrappingInlinePadding, ":empty": { display: "none", }, + selectors: { + [`${android} &`]: { + paddingRight: globalVars.appBar.wrappingInlinePadding, + }, + [`${cupertino} &`]: { + paddingLeft: globalVars.appBar.wrappingInlinePadding, + paddingRight: globalVars.appBar.wrappingInlinePadding, + }, + }, }, ]); @@ -313,9 +325,17 @@ export const right = style([ f.posRel, appBarMinHeight, { - paddingLeft: globalVars.appBar.wrappingInlinePadding, ":empty": { display: "none", }, + selectors: { + [`${android} &`]: { + paddingLeft: globalVars.appBar.wrappingInlinePadding, + }, + [`${cupertino} &`]: { + paddingLeft: globalVars.appBar.wrappingInlinePadding, + paddingRight: globalVars.appBar.wrappingInlinePadding, + }, + }, }, ]); From c4caf2629a96aac7662f9b54f56de0e849d04d00 Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Thu, 20 Nov 2025 23:02:54 +0900 Subject: [PATCH 11/17] add cs --- .changeset/clean-points-cross.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/clean-points-cross.md diff --git a/.changeset/clean-points-cross.md b/.changeset/clean-points-cross.md new file mode 100644 index 000000000..3acbbe8e8 --- /dev/null +++ b/.changeset/clean-points-cross.md @@ -0,0 +1,5 @@ +--- +"@stackflow/plugin-basic-ui": minor +--- + +Expose interfaces to modify dimensions of AppBar From 5fcf448bdc4ae99a0e6b14a572b85f8450ce4948 Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Thu, 20 Nov 2025 23:22:21 +0900 Subject: [PATCH 12/17] attach vars --- extensions/plugin-basic-ui/src/basicUIPlugin.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.tsx b/extensions/plugin-basic-ui/src/basicUIPlugin.tsx index 6c5380d35..8e98d639a 100644 --- a/extensions/plugin-basic-ui/src/basicUIPlugin.tsx +++ b/extensions/plugin-basic-ui/src/basicUIPlugin.tsx @@ -85,6 +85,11 @@ export const basicUIPlugin: ( [css.globalVars.bottomSheet.borderRadius]: _options.bottomSheet?.borderRadius, [css.globalVars.modal.borderRadius]: _options.modal?.borderRadius, + [css.globalVars.appBar.wrappingInlinePadding]: + _options.appBar?.wrappingInlinePadding, + [css.globalVars.appBar.fontSize]: _options.appBar?.fontSize, + [css.globalVars.appBar.backButtonTouchAreaExpansion]: + _options.appBar?.backButtonTouchAreaExpansion, }), )} > From 73994f683aadf45fa6453c8d2cb597993a54c46c Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Fri, 21 Nov 2025 14:44:47 +0900 Subject: [PATCH 13/17] fix centerMainEdge --- extensions/plugin-basic-ui/src/components/AppBar.css.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts index 056a9a8e5..d71f15d86 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.css.ts +++ b/extensions/plugin-basic-ui/src/components/AppBar.css.ts @@ -295,9 +295,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: { From c0a06ae65eff439c226a2406576cda2cea14ae48 Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Fri, 21 Nov 2025 15:23:23 +0900 Subject: [PATCH 14/17] add lineHeight option --- extensions/plugin-basic-ui/src/basicUIPlugin.css.ts | 3 +++ extensions/plugin-basic-ui/src/basicUIPlugin.tsx | 1 + extensions/plugin-basic-ui/src/components/AppBar.css.ts | 2 +- extensions/plugin-basic-ui/src/components/AppBar.tsx | 3 +++ 4 files changed, 8 insertions(+), 1 deletion(-) diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts index d225bcae6..a34afd647 100644 --- a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts +++ b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts @@ -32,6 +32,7 @@ const GLOBAL_VARS = { minSafeAreaInsetTop: "app-bar-min-safe-area-inset-top", wrappingInlinePadding: "app-bar-wrapping-inline-padding", fontSize: "app-bar-font-size", + lineHeight: "app-bar-line-height", backButtonTouchAreaExpansion: "app-bar-back-button-touch-area-expansion", }, bottomSheet: { @@ -76,6 +77,7 @@ const androidValues: GlobalVars = { wrappingInlinePadding: "1rem", fontSize: "1.125rem", backButtonTouchAreaExpansion: "0.5rem", + lineHeight: "1.5", }, bottomSheet: { borderRadius: "1rem", @@ -93,6 +95,7 @@ const cupertinoValues: GlobalVars = { height: "2.75rem", minHeight: "2.75rem", borderSize: "0.5px", + lineHeight: "normal", }, }; diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.tsx b/extensions/plugin-basic-ui/src/basicUIPlugin.tsx index 8e98d639a..f7d4a0b21 100644 --- a/extensions/plugin-basic-ui/src/basicUIPlugin.tsx +++ b/extensions/plugin-basic-ui/src/basicUIPlugin.tsx @@ -88,6 +88,7 @@ export const basicUIPlugin: ( [css.globalVars.appBar.wrappingInlinePadding]: _options.appBar?.wrappingInlinePadding, [css.globalVars.appBar.fontSize]: _options.appBar?.fontSize, + [css.globalVars.appBar.lineHeight]: _options.appBar?.lineHeight, [css.globalVars.appBar.backButtonTouchAreaExpansion]: _options.appBar?.backButtonTouchAreaExpansion, }), diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts index d71f15d86..c7b4cba6f 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.css.ts +++ b/extensions/plugin-basic-ui/src/components/AppBar.css.ts @@ -258,6 +258,7 @@ export const centerMain = style({ display: "flex", color: globalVars.appBar.textColor, fontSize: globalVars.appBar.fontSize, + lineHeight: globalVars.appBar.lineHeight, fontWeight: "bold", transition: transitions({ height: globalVars.appBar.heightTransitionDuration, @@ -267,7 +268,6 @@ export const centerMain = style({ [`${android} &`]: { width: "100%", justifyContent: "flex-start", - lineHeight: "1.5", boxSizing: "border-box", }, [`${cupertino} &`]: { diff --git a/extensions/plugin-basic-ui/src/components/AppBar.tsx b/extensions/plugin-basic-ui/src/components/AppBar.tsx index fa39d11a1..73b2b6d3d 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.tsx +++ b/extensions/plugin-basic-ui/src/components/AppBar.tsx @@ -36,6 +36,7 @@ export type AppBarProps = Partial< | "minHeight" | "wrappingInlinePadding" | "fontSize" + | "lineHeight" | "backButtonTouchAreaExpansion" > > & { @@ -100,6 +101,7 @@ const AppBar = forwardRef( minHeight, wrappingInlinePadding, fontSize, + lineHeight, backButtonTouchAreaExpansion, }, ref, @@ -336,6 +338,7 @@ const AppBar = forwardRef( [globalVars.appBar.fontSize]: fontSize, [globalVars.appBar.backButtonTouchAreaExpansion]: backButtonTouchAreaExpansion, + [globalVars.appBar.lineHeight]: lineHeight, }), )} data-part="appBar" From 2eb26d2a1e30033bb727ec4de65135b5ac1be322 Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Tue, 25 Nov 2025 11:39:59 +0900 Subject: [PATCH 15/17] rename backButtonTouchAreaExpansion to hitSlop --- extensions/plugin-basic-ui/src/basicUIPlugin.css.ts | 4 ++-- extensions/plugin-basic-ui/src/basicUIPlugin.tsx | 3 +-- extensions/plugin-basic-ui/src/components/AppBar.css.ts | 4 ++-- extensions/plugin-basic-ui/src/components/AppBar.tsx | 7 +++---- 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts index a34afd647..ae6e4ded0 100644 --- a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts +++ b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts @@ -33,7 +33,7 @@ const GLOBAL_VARS = { wrappingInlinePadding: "app-bar-wrapping-inline-padding", fontSize: "app-bar-font-size", lineHeight: "app-bar-line-height", - backButtonTouchAreaExpansion: "app-bar-back-button-touch-area-expansion", + hitSlop: "app-bar-hit-slop", }, bottomSheet: { borderRadius: "bottom-sheet-border-radius", @@ -76,7 +76,7 @@ const androidValues: GlobalVars = { minSafeAreaInsetTop: "0px", wrappingInlinePadding: "1rem", fontSize: "1.125rem", - backButtonTouchAreaExpansion: "0.5rem", + hitSlop: "0.5rem", lineHeight: "1.5", }, bottomSheet: { diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.tsx b/extensions/plugin-basic-ui/src/basicUIPlugin.tsx index f7d4a0b21..6b246eacf 100644 --- a/extensions/plugin-basic-ui/src/basicUIPlugin.tsx +++ b/extensions/plugin-basic-ui/src/basicUIPlugin.tsx @@ -89,8 +89,7 @@ export const basicUIPlugin: ( _options.appBar?.wrappingInlinePadding, [css.globalVars.appBar.fontSize]: _options.appBar?.fontSize, [css.globalVars.appBar.lineHeight]: _options.appBar?.lineHeight, - [css.globalVars.appBar.backButtonTouchAreaExpansion]: - _options.appBar?.backButtonTouchAreaExpansion, + [css.globalVars.appBar.hitSlop]: _options.appBar?.hitSlop, }), )} > diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts index c7b4cba6f..50e262a40 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.css.ts +++ b/extensions/plugin-basic-ui/src/components/AppBar.css.ts @@ -238,8 +238,8 @@ export const backButton = style([ opacity: "300ms", color: globalVars.appBar.iconColorTransitionDuration, }), - padding: globalVars.appBar.backButtonTouchAreaExpansion, - margin: `calc(-1 * ${globalVars.appBar.backButtonTouchAreaExpansion})`, + padding: globalVars.appBar.hitSlop, + margin: `calc(-1 * ${globalVars.appBar.hitSlop})`, ":active": { opacity: "0.2", transition: transitions({ diff --git a/extensions/plugin-basic-ui/src/components/AppBar.tsx b/extensions/plugin-basic-ui/src/components/AppBar.tsx index 73b2b6d3d..51a4fed07 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.tsx +++ b/extensions/plugin-basic-ui/src/components/AppBar.tsx @@ -37,7 +37,7 @@ export type AppBarProps = Partial< | "wrappingInlinePadding" | "fontSize" | "lineHeight" - | "backButtonTouchAreaExpansion" + | "hitSlop" > > & { title?: React.ReactNode; @@ -102,7 +102,7 @@ const AppBar = forwardRef( wrappingInlinePadding, fontSize, lineHeight, - backButtonTouchAreaExpansion, + hitSlop, }, ref, ) => { @@ -336,8 +336,7 @@ const AppBar = forwardRef( [globalVars.appBar.minHeight]: minHeight, [globalVars.appBar.wrappingInlinePadding]: wrappingInlinePadding, [globalVars.appBar.fontSize]: fontSize, - [globalVars.appBar.backButtonTouchAreaExpansion]: - backButtonTouchAreaExpansion, + [globalVars.appBar.hitSlop]: hitSlop, [globalVars.appBar.lineHeight]: lineHeight, }), )} From 5818f44e674c74fea574632f3b357b6c379506b7 Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Tue, 25 Nov 2025 11:45:02 +0900 Subject: [PATCH 16/17] separating padding and spacing --- extensions/plugin-basic-ui/src/basicUIPlugin.css.ts | 2 ++ extensions/plugin-basic-ui/src/basicUIPlugin.tsx | 2 ++ .../plugin-basic-ui/src/components/AppBar.css.ts | 10 ++-------- extensions/plugin-basic-ui/src/components/AppBar.tsx | 4 ++++ 4 files changed, 10 insertions(+), 8 deletions(-) diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts index ae6e4ded0..4cc71e967 100644 --- a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts +++ b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts @@ -31,6 +31,7 @@ const GLOBAL_VARS = { overflow: "app-bar-overflow", minSafeAreaInsetTop: "app-bar-min-safe-area-inset-top", wrappingInlinePadding: "app-bar-wrapping-inline-padding", + surroundingContentSpacing: "app-bar-surrounding-content-spacing", fontSize: "app-bar-font-size", lineHeight: "app-bar-line-height", hitSlop: "app-bar-hit-slop", @@ -75,6 +76,7 @@ const androidValues: GlobalVars = { overflow: "hidden", minSafeAreaInsetTop: "0px", wrappingInlinePadding: "1rem", + surroundingContentSpacing: "1rem", fontSize: "1.125rem", hitSlop: "0.5rem", lineHeight: "1.5", diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.tsx b/extensions/plugin-basic-ui/src/basicUIPlugin.tsx index 6b246eacf..81898a9c1 100644 --- a/extensions/plugin-basic-ui/src/basicUIPlugin.tsx +++ b/extensions/plugin-basic-ui/src/basicUIPlugin.tsx @@ -90,6 +90,8 @@ export const basicUIPlugin: ( [css.globalVars.appBar.fontSize]: _options.appBar?.fontSize, [css.globalVars.appBar.lineHeight]: _options.appBar?.lineHeight, [css.globalVars.appBar.hitSlop]: _options.appBar?.hitSlop, + [css.globalVars.appBar.surroundingContentSpacing]: + _options.appBar?.surroundingContentSpacing, }), )} > diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts index 50e262a40..0b144a9e8 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.css.ts +++ b/extensions/plugin-basic-ui/src/components/AppBar.css.ts @@ -212,16 +212,13 @@ export const left = style([ f.fullHeight, appBarMinHeight, { + paddingRight: globalVars.appBar.surroundingContentSpacing, ":empty": { display: "none", }, selectors: { - [`${android} &`]: { - paddingRight: globalVars.appBar.wrappingInlinePadding, - }, [`${cupertino} &`]: { paddingLeft: globalVars.appBar.wrappingInlinePadding, - paddingRight: globalVars.appBar.wrappingInlinePadding, }, }, }, @@ -325,15 +322,12 @@ export const right = style([ f.posRel, appBarMinHeight, { + paddingLeft: globalVars.appBar.surroundingContentSpacing, ":empty": { display: "none", }, selectors: { - [`${android} &`]: { - paddingLeft: globalVars.appBar.wrappingInlinePadding, - }, [`${cupertino} &`]: { - paddingLeft: globalVars.appBar.wrappingInlinePadding, paddingRight: globalVars.appBar.wrappingInlinePadding, }, }, diff --git a/extensions/plugin-basic-ui/src/components/AppBar.tsx b/extensions/plugin-basic-ui/src/components/AppBar.tsx index 51a4fed07..46463cb5f 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.tsx +++ b/extensions/plugin-basic-ui/src/components/AppBar.tsx @@ -38,6 +38,7 @@ export type AppBarProps = Partial< | "fontSize" | "lineHeight" | "hitSlop" + | "surroundingContentSpacing" > > & { title?: React.ReactNode; @@ -103,6 +104,7 @@ const AppBar = forwardRef( fontSize, lineHeight, hitSlop, + surroundingContentSpacing, }, ref, ) => { @@ -338,6 +340,8 @@ const AppBar = forwardRef( [globalVars.appBar.fontSize]: fontSize, [globalVars.appBar.hitSlop]: hitSlop, [globalVars.appBar.lineHeight]: lineHeight, + [globalVars.appBar.surroundingContentSpacing]: + surroundingContentSpacing, }), )} data-part="appBar" From a9b7d2112a2634719f1fde696ab93eb87ff0df94 Mon Sep 17 00:00:00 2001 From: anakin_karrot Date: Tue, 25 Nov 2025 11:50:39 +0900 Subject: [PATCH 17/17] rename --- extensions/plugin-basic-ui/src/basicUIPlugin.css.ts | 8 ++++---- extensions/plugin-basic-ui/src/basicUIPlugin.tsx | 7 +++---- .../plugin-basic-ui/src/components/AppBar.css.ts | 12 ++++++------ .../plugin-basic-ui/src/components/AppBar.tsx | 13 ++++++------- 4 files changed, 19 insertions(+), 21 deletions(-) diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts index 4cc71e967..d388aa384 100644 --- a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts +++ b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts @@ -30,8 +30,8 @@ const GLOBAL_VARS = { "app-bar-background-image-transition-duration", overflow: "app-bar-overflow", minSafeAreaInsetTop: "app-bar-min-safe-area-inset-top", - wrappingInlinePadding: "app-bar-wrapping-inline-padding", - surroundingContentSpacing: "app-bar-surrounding-content-spacing", + 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", @@ -75,8 +75,8 @@ const androidValues: GlobalVars = { backgroundImageTransitionDuration: "0s", overflow: "hidden", minSafeAreaInsetTop: "0px", - wrappingInlinePadding: "1rem", - surroundingContentSpacing: "1rem", + containerPadding: "1rem", + itemGap: "1rem", fontSize: "1.125rem", hitSlop: "0.5rem", lineHeight: "1.5", diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.tsx b/extensions/plugin-basic-ui/src/basicUIPlugin.tsx index 81898a9c1..fbc00aded 100644 --- a/extensions/plugin-basic-ui/src/basicUIPlugin.tsx +++ b/extensions/plugin-basic-ui/src/basicUIPlugin.tsx @@ -85,13 +85,12 @@ export const basicUIPlugin: ( [css.globalVars.bottomSheet.borderRadius]: _options.bottomSheet?.borderRadius, [css.globalVars.modal.borderRadius]: _options.modal?.borderRadius, - [css.globalVars.appBar.wrappingInlinePadding]: - _options.appBar?.wrappingInlinePadding, + [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.surroundingContentSpacing]: - _options.appBar?.surroundingContentSpacing, + [css.globalVars.appBar.itemGap]: _options.appBar?.itemGap, }), )} > diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts index 0b144a9e8..800d3c593 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.css.ts +++ b/extensions/plugin-basic-ui/src/components/AppBar.css.ts @@ -200,8 +200,8 @@ export const container = style([ }), selectors: { [`${android} &`]: { - paddingLeft: globalVars.appBar.wrappingInlinePadding, - paddingRight: globalVars.appBar.wrappingInlinePadding, + paddingLeft: globalVars.appBar.containerPadding, + paddingRight: globalVars.appBar.containerPadding, }, }, }, @@ -212,13 +212,13 @@ export const left = style([ f.fullHeight, appBarMinHeight, { - paddingRight: globalVars.appBar.surroundingContentSpacing, + paddingRight: globalVars.appBar.itemGap, ":empty": { display: "none", }, selectors: { [`${cupertino} &`]: { - paddingLeft: globalVars.appBar.wrappingInlinePadding, + paddingLeft: globalVars.appBar.containerPadding, }, }, }, @@ -322,13 +322,13 @@ export const right = style([ f.posRel, appBarMinHeight, { - paddingLeft: globalVars.appBar.surroundingContentSpacing, + paddingLeft: globalVars.appBar.itemGap, ":empty": { display: "none", }, selectors: { [`${cupertino} &`]: { - paddingRight: globalVars.appBar.wrappingInlinePadding, + paddingRight: globalVars.appBar.containerPadding, }, }, }, diff --git a/extensions/plugin-basic-ui/src/components/AppBar.tsx b/extensions/plugin-basic-ui/src/components/AppBar.tsx index 46463cb5f..57446b8a1 100644 --- a/extensions/plugin-basic-ui/src/components/AppBar.tsx +++ b/extensions/plugin-basic-ui/src/components/AppBar.tsx @@ -34,11 +34,11 @@ export type AppBarProps = Partial< | "backgroundImage" | "backgroundImageTransitionDuration" | "minHeight" - | "wrappingInlinePadding" | "fontSize" | "lineHeight" | "hitSlop" - | "surroundingContentSpacing" + | "containerPadding" + | "itemGap" > > & { title?: React.ReactNode; @@ -100,11 +100,11 @@ const AppBar = forwardRef( enterStyle, className, minHeight, - wrappingInlinePadding, fontSize, lineHeight, hitSlop, - surroundingContentSpacing, + containerPadding, + itemGap, }, ref, ) => { @@ -336,12 +336,11 @@ const AppBar = forwardRef( backgroundImageTransitionDuration, [appScreenCss.vars.appBar.center.mainWidth]: `${maxWidth}px`, [globalVars.appBar.minHeight]: minHeight, - [globalVars.appBar.wrappingInlinePadding]: wrappingInlinePadding, + [globalVars.appBar.containerPadding]: containerPadding, [globalVars.appBar.fontSize]: fontSize, [globalVars.appBar.hitSlop]: hitSlop, [globalVars.appBar.lineHeight]: lineHeight, - [globalVars.appBar.surroundingContentSpacing]: - surroundingContentSpacing, + [globalVars.appBar.itemGap]: itemGap, }), )} data-part="appBar"