@seed-design/css 1.2.6 → 1.2.8

package/recipes/selectBoxCheckmark.layered.css

@@ -20,13 +20,13 @@
     inset: 0;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
       color: var(--seed-color-fg-neutral-subtle);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
       color: var(--seed-color-fg-neutral-subtle);
     }

package/recipes/slider.layered.css

@@ -216,12 +216,12 @@
   }
 
   .seed-slider__valueIndicatorArrow[data-dir="ltr"] {
-    left: calc(50% + (var(--thumb-offset)  - var(--indicator-label-offset)));
+    left: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
     transform: translateX(-50%);
   }
 
   .seed-slider__valueIndicatorArrow[data-dir="rtl"] {
-    right: calc(50% + (var(--thumb-offset)  - var(--indicator-label-offset)));
+    right: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
     transform: translateX(50%);
   }
 

package/recipes/snackbar-region.layered.css

@@ -3,7 +3,7 @@
     z-index: 2147483647;
     left: calc(env(safe-area-inset-left, 0px));
     right: calc(env(safe-area-inset-right, 0px));
-    bottom: calc(env(safe-area-inset-bottom, 0px)  + var(--snackbar-region-offset, 0px));
+    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
     padding-left: var(--seed-dimension-x2);
     padding-right: var(--seed-dimension-x2);
     padding-top: var(--seed-dimension-x2);

package/recipes/switch.layered.css

@@ -27,7 +27,7 @@
   .seed-switch__root--size_16 {
     min-height: var(--seed-dimension-x6);
     gap: var(--seed-dimension-x1_5);
-    --switchmark-margin-top: calc((var(--seed-dimension-x6)  - 16px) / 2);
+    --switchmark-margin-top: calc((var(--seed-dimension-x6) - 16px) / 2);
   }
 
   .seed-switch__label--size_16 {
@@ -39,7 +39,7 @@
   .seed-switch__root--size_24 {
     min-height: var(--seed-dimension-x6);
     gap: var(--seed-dimension-x2);
-    --switchmark-margin-top: calc((var(--seed-dimension-x6)  - 24px) / 2);
+    --switchmark-margin-top: calc((var(--seed-dimension-x6) - 24px) / 2);
   }
 
   .seed-switch__label--size_24 {
@@ -51,7 +51,7 @@
   .seed-switch__root--size_32 {
     min-height: var(--seed-dimension-x8);
     gap: var(--seed-dimension-x2_5);
-    --switchmark-margin-top: calc((var(--seed-dimension-x8)  - 32px) / 2);
+    --switchmark-margin-top: calc((var(--seed-dimension-x8) - 32px) / 2);
   }
 
   .seed-switch__label--size_32 {

package/recipes/switchmark.layered.css

@@ -65,7 +65,7 @@
   }
 
   .seed-switchmark__thumb--size_16:is(:checked, [data-checked]) {
-    transform: scale(1)translateX(10px);
+    transform: scale(1) translateX(10px);
   }
 
   .seed-switchmark__root--size_24 {
@@ -80,7 +80,7 @@
   }
 
   .seed-switchmark__thumb--size_24:is(:checked, [data-checked]) {
-    transform: scale(1)translateX(14px);
+    transform: scale(1) translateX(14px);
   }
 
   .seed-switchmark__root--size_32 {
@@ -95,6 +95,6 @@
   }
 
   .seed-switchmark__thumb--size_32:is(:checked, [data-checked]) {
-    transform: scale(1)translateX(20px);
+    transform: scale(1) translateX(20px);
   }
 }

package/recipes/tabs.layered.css

@@ -113,8 +113,8 @@
   }
 
   .seed-tabs__indicator--triggerLayout_fill {
-    left: calc(var(--indicator-left, 0px)  + var(--seed-dimension-spacing-x-global-gutter));
-    width: calc(var(--indicator-width, 0px)  - 2 * var(--seed-dimension-spacing-x-global-gutter));
+    left: calc(var(--indicator-left, 0px) + var(--seed-dimension-spacing-x-global-gutter));
+    width: calc(var(--indicator-width, 0px) - 2 * var(--seed-dimension-spacing-x-global-gutter));
   }
 
   .seed-tabs__trigger--triggerLayout_fill {
@@ -133,8 +133,8 @@
   }
 
   .seed-tabs__indicator--triggerLayout_hug {
-    left: calc(var(--indicator-left, 0px)  + 0px);
-    width: calc(var(--indicator-width, 0px)  - 2 * 0px);
+    left: calc(var(--indicator-left, 0px) + 0px);
+    width: calc(var(--indicator-width, 0px) - 2 * 0px);
   }
 
   .seed-tabs__trigger--triggerLayout_hug:is([aria-selected="true"], [data-selected])[data-ssr]:after {

package/recipes/toggle-button.css

@@ -34,12 +34,12 @@
     --track-color: var(--seed-color-palette-static-white-alpha-300);
     --range-color: var(--seed-color-palette-static-white);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_brandSolid:is(:hover, [data-hover]) {
         background: var(--seed-color-bg-brand-solid-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
         background: var(--seed-color-bg-brand-solid-pressed);
     }
@@ -52,12 +52,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_brandSolid:is([aria-pressed=true], [data-pressed]):is(:hover, [data-hover]) {
         background: var(--seed-color-bg-neutral-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_brandSolid:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
         background: var(--seed-color-bg-neutral-weak-pressed);
     }
@@ -84,12 +84,12 @@
     --track-color: var(--seed-color-palette-gray-500);
     --range-color: var(--seed-color-fg-neutral);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_neutralWeak:is(:hover, [data-hover]) {
         background: var(--seed-color-bg-neutral-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
         background: var(--seed-color-bg-neutral-weak-pressed);
     }
@@ -102,12 +102,12 @@
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
 }
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_neutralWeak:is([aria-pressed=true], [data-pressed]):is(:hover, [data-hover]) {
         background: var(--seed-color-bg-neutral-weak-pressed);
     }
 }
-@media (hover: none) {
+@media not all and (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_neutralWeak:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
         background: var(--seed-color-bg-neutral-weak-pressed);
     }

package/recipes/toggle-button.layered.css

@@ -40,13 +40,13 @@
     --range-color: var(--seed-color-palette-static-white);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_brandSolid:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-brand-solid-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
       background: var(--seed-color-bg-brand-solid-pressed);
     }
@@ -61,13 +61,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }
@@ -100,13 +100,13 @@
     --range-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_neutralWeak:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }
@@ -121,13 +121,13 @@
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }
   }
 
-  @media (hover: none) {
+  @media not all and (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
       background: var(--seed-color-bg-neutral-weak-pressed);
     }

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": {

package/vars/component/menu-sheet.d.ts

@@ -23,6 +23,7 @@ export declare const vars: {
       },
       "header": {
         "gap": "var(--seed-dimension-x1)",
+        "paddingTop": "var(--seed-dimension-x2)",
         "paddingBottom": "var(--seed-dimension-x4)"
       },
       "title": {

package/vars/component/menu-sheet.mjs

@@ -23,6 +23,7 @@ export const vars = {
       },
       "header": {
         "gap": "var(--seed-dimension-x1)",
+        "paddingTop": "var(--seed-dimension-x2)",
         "paddingBottom": "var(--seed-dimension-x4)"
       },
       "title": {