@seed-design/css 1.2.10 → 1.2.11

package/recipes/app-screen.layered.css

@@ -70,143 +70,11 @@
     transform: translate3d(0, 0, 0);
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    --seed-enter-translate-x: 100%;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-    --seed-exit-translate-x: 100%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [data-global-transition-state="enter-done"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    --seed-enter-translate-x: var(--swipe-back-displacement, 0);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(0, 0, 0);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(100%, 0, 0);
-    animation: none !important;
-  }
-
-  [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
-    --seed-exit-translate-x: -30%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
-    --seed-enter-translate-x: calc(-30% + var(--swipe-back-displacement, 0) * .3);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
-    transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * .3), 0, 0);
-    --seed-exit-translate-x: -30%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * .3), 0, 0);
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(-30%, 0, 0);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(0, 0, 0);
-    animation: none !important;
-  }
-
   .seed-app-screen__dim--transitionStyle_slideFromRightIOS {
     background: var(--seed-color-bg-overlay);
     height: 100%;
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [data-global-transition-state="enter-done"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    opacity: 0;
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    animation: none !important;
-  }
-
   .seed-app-screen__root--transitionStyle_fadeFromBottomAndroid {
     --z-index-dim: calc(var(--z-index-base) + 0);
     --z-index-layer: calc(var(--z-index-base) + 3);
@@ -219,50 +87,10 @@
     height: 160px;
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
-    transform: translate3d(0, -8vh, 0);
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
-    opacity: 1;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .15s linear forwards seed-exit;
-    transform: translate3d(0, -8vh, 0);
-  }
-
   .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid {
     transform: translate3d(0, 0, 0);
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 8vh;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
-    opacity: 1;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 8vh;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .15s linear forwards seed-exit;
-    transform: translate3d(0, 0, 0);
-  }
-
   .seed-app-screen__root--transitionStyle_fadeIn {
     --z-index-dim: calc(var(--z-index-base) + 0);
     --z-index-layer: calc(var(--z-index-base) + 3);
@@ -274,24 +102,6 @@
     display: none;
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_fadeIn[data-activity-is-top] {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .3s ease-out seed-enter;
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_fadeIn[data-activity-is-top] {
-    opacity: 1;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .15s ease-in forwards seed-exit;
-  }
-
   .seed-app-screen__layer--layerOffsetTop_safeArea {
     padding-top: var(--seed-safe-area-top);
   }

package/vars/component/top-navigation-text-button.d.ts

@@ -39,5 +39,14 @@ export declare const vars: {
         "color": "var(--seed-color-fg-disabled)"
       }
     }
-  }
+  },
+  "themeIos": {
+    "enabled": {
+      "root": {
+        /** 버튼 레이블이 길어졌을 때 ellipsis 말줄임을 시작할 최대 너비입니다. Top Navigation main slot이 충분한 공간을 차지할 수 있도록 하기 위해 폰트 스케일링의 영향을 받지 않는 px 값을 사용합니다. */
+        "maxWidth": "96px"
+      }
+    }
+  },
+  "themeAndroid": {}
 }

package/vars/component/top-navigation-text-button.mjs

@@ -39,5 +39,13 @@ export const vars = {
         "color": "var(--seed-color-fg-disabled)"
       }
     }
-  }
+  },
+  "themeIos": {
+    "enabled": {
+      "root": {
+        "maxWidth": "96px"
+      }
+    }
+  },
+  "themeAndroid": {}
 }

package/vars/component/top-navigation.d.ts

@@ -1,5 +1,5 @@
 export declare const vars: {
-  "themeCupertino": {
+  "themeIos": {
     "enabled": {
       "root": {
         "height": "44px",
@@ -19,6 +19,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * color를 $color.bg.layer-basement 등으로 변경하여 사용할 수 있습니다.
+   */
   "toneLayer": {
     "enabled": {
       "root": {
@@ -34,9 +37,6 @@ export declare const vars: {
   },
   "toneTransparent": {
     "enabled": {
-      "root": {
-        "color": "#00000000"
-      },
       "title": {
         "color": "var(--seed-color-palette-static-white)"
       },
@@ -45,6 +45,25 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * - `gradient=false`: false로 사용하는 것을 권장하지 않습니다. gradient 없이 사용하면 Top Navigation의 콘텐츠 가독성을 직접 확보해야 합니다. 스크린 배경 색상이 Top Navigation에 보이기를 원하는 경우 tone=layer를 사용하세요.
+   */
+  "toneTransparentGradientFalse": {
+    "enabled": {
+      "root": {
+        "color": "#00000000"
+      }
+    }
+  },
+  "toneTransparentGradientTrue": {
+    "enabled": {
+      "root": {
+        "gradient": "#00000059 0%, #00000000 100%",
+        /** gradient가 표시될 때 하단 아래로 gradient가 확장되는 길이입니다. */
+        "bleedBottom": "var(--seed-dimension-x5)"
+      }
+    }
+  },
   "dividerTrue": {
     "enabled": {
       "root": {
@@ -53,6 +72,7 @@ export declare const vars: {
       }
     }
   },
+  "dividerFalse": {},
   "titleLayoutTitleOnly": {
     "enabled": {
       "title": {

package/vars/component/top-navigation.mjs

@@ -1,5 +1,5 @@
 export const vars = {
-  "themeCupertino": {
+  "themeIos": {
     "enabled": {
       "root": {
         "height": "44px",
@@ -33,9 +33,6 @@ export const vars = {
   },
   "toneTransparent": {
     "enabled": {
-      "root": {
-        "color": "#00000000"
-      },
       "title": {
         "color": "var(--seed-color-palette-static-white)"
       },
@@ -44,6 +41,21 @@ export const vars = {
       }
     }
   },
+  "toneTransparentGradientFalse": {
+    "enabled": {
+      "root": {
+        "color": "#00000000"
+      }
+    }
+  },
+  "toneTransparentGradientTrue": {
+    "enabled": {
+      "root": {
+        "gradient": "#00000059 0%, #00000000 100%",
+        "bleedBottom": "var(--seed-dimension-x5)"
+      }
+    }
+  },
   "dividerTrue": {
     "enabled": {
       "root": {
@@ -52,6 +64,7 @@ export const vars = {
       }
     }
   },
+  "dividerFalse": {},
   "titleLayoutTitleOnly": {
     "enabled": {
       "title": {