feat: cleanup stylesheet

daangn · Jan 27, 2025 · 554bd27 · 554bd27
1 parent e0622ae
commit 554bd27
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 24 deletions.
diff --git a/packages/qvism-preset/src/stackflow/app-screen.ts b/packages/qvism-preset/src/stackflow/app-screen.ts
@@ -31,9 +31,9 @@ export const appScreen = defineRecipe({
       zIndex: "var(--z-index-dim)",
       position: "absolute",
       width: "100%",
+      top: 0,
       left: 0,
       right: 0,
-      opacity: 0,
     },
     layer: {
       zIndex: "var(--z-index-layer)",
@@ -103,7 +103,6 @@ export const appScreen = defineRecipe({
           [swipeBackSwipingBehind]: iOSAnimations.layerBehind.interaction,
         },
         dim: {
-          opacity: 1,
           [push]: iOSAnimations.dim.push,
           [pop]: iOSAnimations.dim.pop,
           [idle]: iOSAnimations.dim.idle,
@@ -118,15 +117,15 @@ export const appScreen = defineRecipe({
           "--z-index-app-bar": "calc(var(--z-index-base) + 4)",
         },
         dim: {
-          top: 0,
           height: "160px",
           background: `linear-gradient(${vars.$color.bg.overlay}, rgba(0, 0, 0, 0))`,
+
           [push]: fadeFromBottomAndroidAnimations.dim.push,
           [pop]: fadeFromBottomAndroidAnimations.dim.pop,
         },
         layer: {
-          opacity: 1,
           transform: "translate3d(0, 0, 0)",
+
           [push]: fadeFromBottomAndroidAnimations.layer.push,
           [pop]: fadeFromBottomAndroidAnimations.layer.pop,
         },
@@ -166,7 +165,6 @@ export const appBar = defineRecipe({
   name: "appBar",
   slots: [
     "root",
-    "safeArea",
     "left",
     "right",
     "title",

diff --git a/packages/recipe/lib/appBar.d.ts b/packages/recipe/lib/appBar.d.ts
@@ -23,7 +23,7 @@ declare type AppBarVariantMap = {
 
 export declare type AppBarVariantProps = Partial<AppBarVariant>;
 
-export declare type AppBarSlotName = "root" | "safeArea" | "left" | "right" | "title" | "titleMain" | "titleText" | "subtitleText" | "iconButton" | "icon";
+export declare type AppBarSlotName = "root" | "left" | "right" | "title" | "titleMain" | "titleText" | "subtitleText" | "iconButton" | "icon";
 
 export declare const appBarVariantMap: AppBarVariantMap;
 

diff --git a/packages/recipe/lib/appBar.mjs b/packages/recipe/lib/appBar.mjs
@@ -7,10 +7,6 @@ const appBarSlotNames = [
     "root",
     "appBar__root"
   ],
-  [
-    "safeArea",
-    "appBar__safeArea"
-  ],
   [
     "left",
     "appBar__left"

diff --git a/packages/stylesheet/appScreen.css b/packages/stylesheet/appScreen.css
@@ -11,9 +11,9 @@
     z-index: var(--z-index-dim);
     position: absolute;
     width: 100%;
+    top: 0;
     left: 0;
     right: 0;
-    opacity: 0;
 }
 .appScreen__layer {
     z-index: var(--z-index-layer);
@@ -133,9 +133,6 @@
     animation: none;
     transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * 0.3), 0, 0);
 }
-.appScreen__dim--transitionStyle_slideFromRightIOS {
-    opacity: 1;
-}
 [data-global-transition-state=enter-active] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
     animation: seed-enter;
     animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85);
@@ -178,7 +175,6 @@
     --z-index-app-bar: calc(var(--z-index-base) + 4);
 }
 .appScreen__dim--transitionStyle_fadeFromBottomAndroid {
-    top: 0;
     height: 160px;
     background: linear-gradient(var(--seed-v3-color-bg-overlay), rgba(0, 0, 0, 0));
 }
@@ -206,7 +202,6 @@
     --seed-exit-scale: 1;
 }
 .appScreen__layer--transitionStyle_fadeFromBottomAndroid {
-    opacity: 1;
     transform: translate3d(0, 0, 0);
 }
 [data-global-transition-state=enter-active] .appScreen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {

diff --git a/packages/stylesheet/component.css b/packages/stylesheet/component.css
@@ -4548,9 +4548,9 @@
 
 .appScreen__dim {
   z-index: var(--z-index-dim);
-  opacity: 0;
   width: 100%;
   position: absolute;
+  top: 0;
   left: 0;
   right: 0;
 }
@@ -4676,10 +4676,6 @@
   animation: none;
 }
 
-.appScreen__dim--transitionStyle_slideFromRightIOS {
-  opacity: 1;
-}
-
 [data-global-transition-state="enter-active"] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
   --seed-enter-translate-x: 0;
   --seed-enter-translate-y: 0;
@@ -4722,7 +4718,6 @@
 .appScreen__dim--transitionStyle_fadeFromBottomAndroid {
   background: linear-gradient(var(--seed-v3-color-bg-overlay), #0000);
   height: 160px;
-  top: 0;
 }
 
 [data-global-transition-state="enter-active"] .appScreen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
@@ -4746,7 +4741,6 @@
 }
 
 .appScreen__layer--transitionStyle_fadeFromBottomAndroid {
-  opacity: 1;
   transform: translate3d(0, 0, 0);
 }
 

diff --git a/packages/stylesheet/component.min.css b/packages/stylesheet/component.min.css