@seed-design/css 1.2.6 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/css",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/recipes/app-bar.css

@@ -230,6 +230,99 @@
     opacity: 1;
     transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
 }
+[data-global-transition-state=enter-active] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    animation: seed-enter;
+    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
+    animation-duration: 350ms;
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: 0;
+    --seed-enter-scale: 1;
+    opacity: 1;
+}
+[data-global-transition-state=exit-active] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
+    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    animation: seed-exit;
+    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
+    animation-duration: 350ms;
+    animation-fill-mode: forwards;
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+}
+[data-global-transition-state=enter-done] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    animation: seed-enter;
+    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
+    animation-duration: 350ms;
+    --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * 0.15);
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    --seed-enter-scale: 1;
+    opacity: 1;
+}
+[data-swipe-back-state=swiping] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    animation: none;
+    transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
+    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+}
+[data-swipe-back-state=canceling] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    animation: none !important;
+    opacity: 1;
+    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
+}
+[data-swipe-back-state=completing] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    animation: none !important;
+    opacity: 0;
+    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
+}
+[data-global-transition-state=enter-active][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    opacity: 1;
+    animation: seed-exit;
+    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
+    animation-duration: 350ms;
+    animation-fill-mode: forwards;
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+}
+[data-global-transition-state=exit-active][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    animation: seed-enter;
+    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
+    animation-duration: 350ms;
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    --seed-enter-scale: 1;
+    opacity: 1;
+}
+[data-global-transition-state=enter-done][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    animation: seed-exit;
+    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
+    animation-duration: 350ms;
+    animation-fill-mode: forwards;
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+}
+[data-swipe-back-state=swiping] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    animation: none;
+    opacity: calc(var(--swipe-back-displacement-ratio, 0));
+}
+[data-swipe-back-state=canceling] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    animation: none !important;
+    opacity: 0;
+    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
+}
+[data-swipe-back-state=completing] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    animation: none !important;
+    opacity: 1;
+    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
+}
 [data-global-transition-state=enter-active] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
     animation: seed-enter;
     animation-timing-function: cubic-bezier(0.23, 0.1, 0.32, 1);

package/recipes/app-bar.d.ts

@@ -23,7 +23,7 @@ declare type AppBarVariantMap = {
 
 export declare type AppBarVariantProps = Partial<AppBarVariant>;
 
-export declare type AppBarSlotName = "root" | "left" | "right" | "iconButton" | "icon";
+export declare type AppBarSlotName = "root" | "left" | "right" | "iconButton" | "icon" | "custom";
 
 export declare const appBarVariantMap: AppBarVariantMap;
 

package/recipes/app-bar.layered.css

@@ -242,6 +242,96 @@
     animation: none !important;
   }
 
+  [data-global-transition-state="enter-active"] .seed-app-bar__custom--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-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
+    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    --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-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .15);
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    --seed-enter-scale: 1;
+    opacity: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+  }
+
+  [data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
+    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    animation: none;
+  }
+
+  [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    opacity: 1;
+    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-bar__custom--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;
+  }
+
+  [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([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: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+  }
+
+  [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    --seed-enter-scale: 1;
+    opacity: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+  }
+
+  [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    opacity: calc(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-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    animation: none;
+  }
+
+  [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([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;
+  }
+
+  [data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    opacity: 1;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
   [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
     --seed-enter-translate-x: 0;
     --seed-enter-translate-y: 8vh;

package/recipes/app-bar.layered.mjs

@@ -21,6 +21,10 @@ const appBarSlotNames = [
   [
     "icon",
     "seed-app-bar__icon"
+  ],
+  [
+    "custom",
+    "seed-app-bar__custom"
   ]
 ];
 

package/recipes/app-bar.mjs

@@ -21,6 +21,10 @@ const appBarSlotNames = [
   [
     "icon",
     "seed-app-bar__icon"
+  ],
+  [
+    "custom",
+    "seed-app-bar__custom"
   ]
 ];
 

package/recipes/avatar-stack.css

@@ -43,6 +43,13 @@
     clip-path: inset(-2px);
     box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default)
 }
+.seed-avatar-stack__item--size_56:not(:first-child) {
+    margin-left: -13px
+}
+.seed-avatar-stack__item--size_56 {
+    clip-path: inset(-3px);
+    box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default)
+}
 .seed-avatar-stack__item--size_64:not(:first-child) {
     margin-left: -16px
 }

package/recipes/avatar-stack.d.ts

@@ -2,7 +2,7 @@ declare interface AvatarStackVariant {
   /**
   * @default 48
   */
-  size: "20" | "24" | "36" | "42" | "48" | "64" | "80" | "96" | "108";
+  size: "20" | "24" | "36" | "42" | "48" | "56" | "64" | "80" | "96" | "108";
 }
 
 declare type AvatarStackVariantMap = {

package/recipes/avatar-stack.layered.css

@@ -56,6 +56,15 @@
     box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
   }
 
+  .seed-avatar-stack__item--size_56:not(:first-child) {
+    margin-left: -13px;
+  }
+
+  .seed-avatar-stack__item--size_56 {
+    clip-path: inset(-3px);
+    box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
+  }
+
   .seed-avatar-stack__item--size_64:not(:first-child) {
     margin-left: -16px;
   }

package/recipes/avatar-stack.layered.mjs

@@ -25,6 +25,7 @@ export const avatarStackVariantMap = {
     "36",
     "42",
     "48",
+    "56",
     "64",
     "80",
     "96",

package/recipes/avatar-stack.mjs

@@ -25,6 +25,7 @@ export const avatarStackVariantMap = {
     "36",
     "42",
     "48",
+    "56",
     "64",
     "80",
     "96",

package/recipes/avatar.css

@@ -137,6 +137,16 @@
     --badge-size: 18px;
     --badge-offset: 30px;
 }
+.seed-avatar__root--size_56 {
+    --avatar-size: 56px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 24px;
+    --badge-mask-offset: 34px;
+}
+.seed-avatar__badge--size_56 {
+    --badge-size: 20px;
+    --badge-offset: 36px;
+}
 .seed-avatar__root--size_64 {
     --avatar-size: 64px;
     --avatar-stroke-width: 1px;

package/recipes/avatar.d.ts

@@ -2,7 +2,7 @@ declare interface AvatarVariant {
   /**
   * @default 48
   */
-  size: "20" | "24" | "36" | "42" | "48" | "64" | "80" | "96" | "108";
+  size: "20" | "24" | "36" | "42" | "48" | "56" | "64" | "80" | "96" | "108";
 /**
   * @default "none"
   */

package/recipes/avatar.layered.css

@@ -152,6 +152,18 @@
     --badge-offset: 30px;
   }
 
+  .seed-avatar__root--size_56 {
+    --avatar-size: 56px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 24px;
+    --badge-mask-offset: 34px;
+  }
+
+  .seed-avatar__badge--size_56 {
+    --badge-size: 20px;
+    --badge-offset: 36px;
+  }
+
   .seed-avatar__root--size_64 {
     --avatar-size: 64px;
     --avatar-stroke-width: 1px;

package/recipes/avatar.layered.mjs

@@ -34,6 +34,7 @@ export const avatarVariantMap = {
     "36",
     "42",
     "48",
+    "56",
     "64",
     "80",
     "96",

package/recipes/avatar.mjs

@@ -34,6 +34,7 @@ export const avatarVariantMap = {
     "36",
     "42",
     "48",
+    "56",
     "64",
     "80",
     "96",

package/vars/color/bg.d.ts

@@ -23,17 +23,17 @@ export declare const informativeSolidPressed = "var(--seed-color-bg-informative-
 export declare const informativeWeak = "var(--seed-color-bg-informative-weak)";
 /** 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak-pressed) */
 export declare const informativeWeakPressed = "var(--seed-color-bg-informative-weak-pressed)";
-/** 가장 낮은 0단계의 '대지'입니다. 앱의 가장 깊은 곳에 위치하는 전체 배경색입니다. */
+/** 가장 낮은 0단계의 '대지'입니다. 화면 가장 깊은 곳에 위치하는 전체 배경색입니다. */
 export declare const layerBasement = "var(--seed-color-bg-layer-basement)";
-/** basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠가 이 레이어 위에서 표현됩니다. */
+/** basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. */
 export declare const layerDefault = "var(--seed-color-bg-layer-default)";
-/** basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠가 이 레이어 위에서 표현됩니다. (pressed) */
+/** basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. (pressed) */
 export declare const layerDefaultPressed = "var(--seed-color-bg-layer-default-pressed)";
 /** @deprecated `@seed-design/css@1.3.0`에서 제거될 예정입니다. */
 export declare const layerFill = "var(--seed-color-bg-layer-fill)";
-/** 앱의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 모달성 요소들이 여기에 속합니다. */
+/** 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. */
 export declare const layerFloating = "var(--seed-color-bg-layer-floating)";
-/** 앱의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 모달성 요소들이 여기에 속합니다. (pressed) */
+/** 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. (pressed) */
 export declare const layerFloatingPressed = "var(--seed-color-bg-layer-floating-pressed)";
 export declare const magicWeak = "var(--seed-color-bg-magic-weak)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted) */

package/vars/component/avatar-stack.d.ts

@@ -57,6 +57,16 @@ export declare const vars: {
       }
     }
   },
+  "size56": {
+    "enabled": {
+      "root": {
+        "gap": "-13px"
+      },
+      "item": {
+        "strokeWidth": "3px"
+      }
+    }
+  },
   "size64": {
     "enabled": {
       "root": {

package/vars/component/avatar-stack.mjs

@@ -57,6 +57,16 @@ export const vars = {
       }
     }
   },
+  "size56": {
+    "enabled": {
+      "root": {
+        "gap": "-13px"
+      },
+      "item": {
+        "strokeWidth": "3px"
+      }
+    }
+  },
   "size64": {
     "enabled": {
       "root": {

package/vars/component/avatar.d.ts

@@ -7,6 +7,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 대표 사용처: 댓글을 남긴 사용자
+   */
   "size20": {
     "enabled": {
       "root": {
@@ -15,6 +18,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 대표 사용처: 답글 프로필
+   */
   "size24": {
     "enabled": {
       "root": {
@@ -33,6 +39,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 대표 사용처: 댓글 프로필
+   */
   "size36": {
     "enabled": {
       "root": {
@@ -51,6 +60,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 대표 사용처: 게시글 상세 내 프로필
+   */
   "size42": {
     "enabled": {
       "root": {
@@ -69,6 +81,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 대표 사용처: 작은 리스트
+   */
   "size48": {
     "enabled": {
       "root": {
@@ -87,6 +102,30 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 대표 사용처: 큰 리스트
+   */
+  "size56": {
+    "enabled": {
+      "root": {
+        "size": "56px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "34px",
+        "size": "24px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "36px",
+        "size": "20px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 프로필 상세, 캐러셀
+   */
   "size64": {
     "enabled": {
       "root": {
@@ -141,6 +180,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 대표 사용처: 프로필 수정
+   */
   "size108": {
     "enabled": {
       "root": {

package/vars/component/avatar.mjs

@@ -79,6 +79,22 @@ export const vars = {
       }
     }
   },
+  "size56": {
+    "enabled": {
+      "root": {
+        "size": "56px",
+        "strokeWidth": "1px"
+      },
+      "badgeMask": {
+        "offset": "34px",
+        "size": "24px"
+      },
+      "badge": {
+        "offset": "36px",
+        "size": "20px"
+      }
+    }
+  },
   "size64": {
     "enabled": {
       "root": {