@seed-design/lynx-css 0.14.0 → 0.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-css",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -62,7 +62,7 @@
   "devDependencies": {
     "@seed-design/qvism-cli": "0.0.0",
     "@seed-design/lynx-qvism-preset": "0.0.0",
-    "@seed-design/rootage-artifacts": "3.0.0"
+    "@seed-design/rootage-artifacts": "3.0.2"
   },
   "publishConfig": {
     "access": "public"

package/recipes/page-banner.css

@@ -218,7 +218,7 @@
     color: var(--seed-color-fg-on-informative-solid);
 }
 .seed-page-banner__closeButtonIcon--tone_informative-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-informative-solid);
 }
 .seed-page-banner__root--tone_positive-variant_weak {
     background-color: var(--seed-color-bg-positive-weak);
@@ -260,7 +260,7 @@
     color: var(--seed-color-fg-on-positive-solid);
 }
 .seed-page-banner__closeButtonIcon--tone_positive-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-positive-solid);
 }
 .seed-page-banner__root--tone_warning-variant_weak {
     background-color: var(--seed-color-bg-warning-weak);
@@ -302,7 +302,7 @@
     color: var(--seed-color-fg-on-warning-solid);
 }
 .seed-page-banner__closeButtonIcon--tone_warning-variant_solid {
-    color: var(--seed-color-palette-static-black-alpha-900);
+    color: var(--seed-color-fg-on-warning-solid);
 }
 .seed-page-banner__root--tone_critical-variant_weak {
     background-color: var(--seed-color-bg-critical-weak);
@@ -344,7 +344,7 @@
     color: var(--seed-color-fg-on-critical-solid);
 }
 .seed-page-banner__closeButtonIcon--tone_critical-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-critical-solid);
 }
 .seed-page-banner__root--tone_magic-variant_weak {
     background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));

package/vars/color/bg.d.ts

@@ -44,9 +44,9 @@ export declare const neutralMuted = "var(--seed-color-bg-neutral-muted)";
 export declare const neutralSolid = "var(--seed-color-bg-neutral-solid)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-pressed) */
 export declare const neutralSolidPressed = "var(--seed-color-bg-neutral-solid-pressed)";
-/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted) */
+/** @deprecated 이 토큰은 @seed-design/css@4.0.0과 이에 대응하는 @seed-design/lynx-css 버전에서 제거될 예정입니다. 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted) */
 export declare const neutralSolidMuted = "var(--seed-color-bg-neutral-solid-muted)";
-/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted-pressed) */
+/** @deprecated 이 토큰은 @seed-design/css@4.0.0과 이에 대응하는 @seed-design/lynx-css 버전에서 제거될 예정입니다. 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted-pressed) */
 export declare const neutralSolidMutedPressed = "var(--seed-color-bg-neutral-solid-muted-pressed)";
 /** 표면과 같은 색상입니다. 회색 표면 위에서 주변과 구분되는 영역에 사용됩니다. (subtle) */
 export declare const neutralSubtle = "var(--seed-color-bg-neutral-subtle)";

package/vars/component/alert-dialog.d.ts

@@ -10,9 +10,11 @@ export declare const vars: {
         "exitTimingFunction": "var(--seed-timing-function-exit)",
         "exitOpacity": "0"
       },
+      /** content는 가로 기준으로 안전 영역의 가운데에 놓입니다. 세로 기준으로는 상단과 하단 inset 중 큰 값을 위아래에 똑같이 두어 화면 가운데에 놓이고, 높이는 그 사이 높이를 넘지 않습니다. */
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
         "cornerRadius": "var(--seed-radius-r5)",
+        /** content와 좌우 안전 영역 경계 사이의 최소 간격입니다. 화면 끝이 아니라 안전 영역 경계부터 잽니다. */
         "marginX": "var(--seed-dimension-x8)",
         "marginY": "var(--seed-dimension-x16)",
         "maxWidth": "272px",

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

@@ -10,9 +10,12 @@ export declare const vars: {
         "exitTimingFunction": "var(--seed-timing-function-exit)",
         "exitOpacity": "0"
       },
+      /** content는 가로 기준으로 안전 영역의 가운데에 놓이고, 하단 inset을 content의 하단 패딩으로 적용합니다. */
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
         "maxWidth": "480px",
+        /** inset을 빼지 않은 viewport height 또는 parent height에 대한 최대 비율입니다. 최대 높이는 min(maxHeightFraction × 높이, 상단 inset을 뺀 높이)이므로, content는 상단 안전 영역 경계까지만 커집니다. */
+        "maxHeightFraction": "0.9",
         "topCornerRadius": "var(--seed-radius-r6)",
         "enterDuration": "var(--seed-duration-d6)",
         "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",

package/vars/component/bottom-sheet.mjs

@@ -13,6 +13,7 @@ export const vars = {
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
         "maxWidth": "480px",
+        "maxHeightFraction": "0.9",
         "topCornerRadius": "var(--seed-radius-r6)",
         "enterDuration": "var(--seed-duration-d6)",
         "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",

package/vars/component/dialog.d.ts

@@ -10,13 +10,15 @@ export declare const vars: {
         "exitTimingFunction": "var(--seed-timing-function-exit)",
         "exitOpacity": "0"
       },
+      /** content는 가로 기준으로 안전 영역의 가운데에 놓이고, 소비자가 지정한 너비는 안전 영역의 너비를 기준으로 합니다. 세로 기준으로는 상단과 하단 inset 중 큰 값을 위아래에 똑같이 두어 화면 가운데에 놓입니다. */
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
         "cornerRadius": "var(--seed-radius-r5)",
-        /** viewport width 또는 parent width에 대한 비율입니다. viewport `md` 미만에서 적용합니다. */
+        /** 좌우 inset을 뺀 viewport width 또는 parent width에 대한 비율입니다. viewport `md` 미만에서 적용합니다. */
         "widthFraction": "0.9",
-        /** viewport height 또는 parent height에 대한 최대 비율입니다. */
+        /** viewport height 또는 parent height에 대한 최대 비율입니다. 최대 높이는 min(maxHeightFraction × 높이, 상단과 하단 inset 중 큰 값을 위아래에서 각각 뺀 높이)입니다. */
         "maxHeightFraction": "0.8",
+        /** viewport `md` 이상에서 content와 좌우 안전 영역 경계 사이에 두는 최소 간격입니다. */
         "marginX": "var(--seed-dimension-x5)",
         "enterDuration": "var(--seed-duration-d4)",
         "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
@@ -76,6 +78,7 @@ export declare const vars: {
   },
   "sizeMedium": {
     "enabled": {
+      /** content는 가로 기준으로 안전 영역의 가운데에 놓이고, 소비자가 지정한 너비는 안전 영역의 너비를 기준으로 합니다. 세로 기준으로는 상단과 하단 inset 중 큰 값을 위아래에 똑같이 두어 화면 가운데에 놓입니다. */
       "content": {
         "maxWidth": "480px"
       }
@@ -83,6 +86,7 @@ export declare const vars: {
   },
   "sizeLarge": {
     "enabled": {
+      /** content는 가로 기준으로 안전 영역의 가운데에 놓이고, 소비자가 지정한 너비는 안전 영역의 너비를 기준으로 합니다. 세로 기준으로는 상단과 하단 inset 중 큰 값을 위아래에 똑같이 두어 화면 가운데에 놓입니다. */
       "content": {
         "maxWidth": "800px"
       }

package/vars/component/help-bubble.d.ts

@@ -7,6 +7,7 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x3)",
         "paddingY": "var(--seed-dimension-x2_5)",
         "gap": "var(--seed-dimension-x1)",
+        /** 가용 너비(overflowPadding 참고)가 이보다 작으면 가용 너비로 축소됩니다. */
         "maxWidth": "280px",
         "enterScale": "0.9",
         "enterOpacity": "0",
@@ -16,7 +17,7 @@ export declare const vars: {
         "exitOpacity": "0",
         "exitDuration": "var(--seed-duration-d4)",
         "exitTimingFunction": "var(--seed-timing-function-easing)",
-        /** 말풍선과 뷰포트 경계 사이의 최소 간격을 정의합니다. */
+        /** 말풍선과 안전 영역 경계 사이의 최소 간격을 정의합니다. 말풍선은 화면 끝에서 inset + overflowPadding만큼 안쪽에 배치되며, 가용 너비도 같은 기준으로 계산합니다. */
         "overflowPadding": "var(--seed-dimension-x4)"
       },
       "arrow": {

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

@@ -10,11 +10,15 @@ export declare const vars: {
         "exitTimingFunction": "var(--seed-timing-function-exit)",
         "exitOpacity": "0"
       },
+      /** content는 가로 기준으로 안전 영역의 가운데에 놓입니다. */
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
         "maxWidth": "480px",
+        /** inset을 빼지 않은 viewport height 또는 parent height에 대한 최대 비율입니다. 최대 높이는 min(maxHeightFraction × 높이, 상단 inset을 뺀 높이)이므로, content는 상단 안전 영역 경계까지만 커집니다. */
+        "maxHeightFraction": "0.9",
         "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
         "paddingTop": "var(--seed-dimension-x6)",
+        /** 이 값은 하단 inset과 합산하여 적용합니다. */
         "paddingBottom": "var(--seed-dimension-x4)",
         "topCornerRadius": "var(--seed-radius-r5)",
         "enterDuration": "var(--seed-duration-d6)",
@@ -24,6 +28,7 @@ export declare const vars: {
       },
       "header": {
         "gap": "var(--seed-dimension-x1)",
+        /** 이 값은 하단 inset과 합산하여 적용합니다. */
         "paddingBottom": "var(--seed-dimension-x4)"
       },
       "title": {

package/vars/component/menu-sheet.mjs

@@ -13,6 +13,7 @@ export const vars = {
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
         "maxWidth": "480px",
+        "maxHeightFraction": "0.9",
         "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
         "paddingTop": "var(--seed-dimension-x6)",
         "paddingBottom": "var(--seed-dimension-x4)",

package/vars/component/menu.d.ts

@@ -17,8 +17,9 @@ export declare const vars: {
         "gap": "var(--seed-dimension-x2)",
         /** 트리거와 메뉴 사이의 간격을 정의합니다. */
         "gutter": "var(--seed-dimension-x2)",
-        /** 메뉴와 뷰포트 경계 사이의 최소 간격을 정의합니다. */
+        /** 메뉴와 안전 영역 경계 사이의 최소 간격을 정의합니다. 메뉴는 화면 끝에서 inset + overflowPadding만큼 안쪽에 배치되며, 가용 높이도 같은 기준으로 계산합니다. */
         "overflowPadding": "var(--seed-dimension-x2)",
+        /** 가용 높이(overflowPadding 참고)가 이보다 작으면 가용 높이로 축소됩니다. */
         "maxHeight": "480px"
       },
       "groupLabel": {

package/vars/component/page-banner-close-button.d.ts

@@ -55,7 +55,7 @@ export declare const vars: {
   "tonePositiveVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-positive-solid)"
       }
     }
   },
@@ -75,7 +75,7 @@ export declare const vars: {
   "toneInformativeVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-informative-solid)"
       }
     }
   },
@@ -95,7 +95,7 @@ export declare const vars: {
   "toneWarningVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
+        "color": "var(--seed-color-fg-on-warning-solid)"
       }
     }
   },
@@ -115,7 +115,7 @@ export declare const vars: {
   "toneCriticalVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-critical-solid)"
       }
     }
   },

package/vars/component/page-banner-close-button.mjs

@@ -43,7 +43,7 @@ export const vars = {
   "tonePositiveVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-positive-solid)"
       }
     }
   },
@@ -57,7 +57,7 @@ export const vars = {
   "toneInformativeVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-informative-solid)"
       }
     }
   },
@@ -71,7 +71,7 @@ export const vars = {
   "toneWarningVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
+        "color": "var(--seed-color-fg-on-warning-solid)"
       }
     }
   },
@@ -85,7 +85,7 @@ export const vars = {
   "toneCriticalVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-critical-solid)"
       }
     }
   },

package/vars/component/popover.d.ts

@@ -5,15 +5,15 @@ export declare const vars: {
         "color": "var(--seed-color-bg-layer-floating)",
         "cornerRadius": "var(--seed-radius-r5)",
         "shadow": "var(--seed-shadow-s3)",
-        /** viewport가 이보다 작으면 overflowPadding을 뺀 가용 너비로 축소됩니다. */
+        /** 가용 너비(overflowPadding 참고)가 이보다 작으면 가용 너비로 축소됩니다. */
         "minWidth": "320px",
-        /** viewport가 이보다 작으면 overflowPadding을 뺀 가용 너비로 축소됩니다. */
+        /** 가용 너비(overflowPadding 참고)가 이보다 작으면 가용 너비로 축소됩니다. */
         "maxWidth": "480px",
-        /** viewport가 이보다 작으면 overflowPadding과 safe-area를 뺀 가용 높이로 축소됩니다. */
+        /** 가용 높이(overflowPadding 참고)가 이보다 작으면 가용 높이로 축소됩니다. */
         "maxHeight": "600px",
         /** 트리거와 popover 사이의 간격을 정의합니다. */
         "gutter": "var(--seed-dimension-x2)",
-        /** popover와 뷰포트 경계 사이의 최소 간격을 정의합니다. 위아래에 safe-area가 있으면 그 안쪽으로 배치됩니다. */
+        /** popover와 안전 영역 경계 사이의 최소 간격을 정의합니다. popover는 화면 끝에서 inset + overflowPadding만큼 안쪽에 배치되며, 가용 너비와 높이도 같은 기준으로 계산합니다. */
         "overflowPadding": "var(--seed-dimension-x4)",
         "enterDuration": "var(--seed-duration-d3)",
         "enterTimingFunction": "var(--seed-timing-function-enter)",

package/vars/component/select.d.ts

@@ -17,8 +17,9 @@ export declare const vars: {
         "gap": "var(--seed-dimension-x2)",
         /** 트리거와 목록 사이의 간격을 정의합니다. */
         "gutter": "var(--seed-dimension-x2)",
-        /** 목록과 뷰포트 경계 사이의 최소 간격을 정의합니다. */
+        /** 목록과 안전 영역 경계 사이의 최소 간격을 정의합니다. 목록은 화면 끝에서 inset + overflowPadding만큼 안쪽에 배치되며, 가용 높이도 같은 기준으로 계산합니다. */
         "overflowPadding": "var(--seed-dimension-x2)",
+        /** 가용 높이(overflowPadding 참고)가 이보다 작으면 가용 높이로 축소됩니다. */
         "maxHeight": "480px"
       },
       "groupLabel": {

package/vars/component/side-panel.d.ts

@@ -10,10 +10,10 @@ export declare const vars: {
         "exitTimingFunction": "var(--seed-timing-function-exit)",
         "exitOpacity": "0"
       },
-      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      /** 하단 inset을 content의 하단 패딩으로 적용합니다. */
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
-        /** viewport 또는 parent width에 대한 mobile content width 비율입니다. */
+        /** 좌우 inset을 뺀 viewport width 또는 parent width에 대한 mobile content width 비율입니다. content의 최대 너비도 같은 기준 너비에 이 비율을 곱해 정합니다. */
         "widthFraction": "0.8",
         "enterDuration": "var(--seed-duration-d6)",
         "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
@@ -24,7 +24,7 @@ export declare const vars: {
         "gap": "var(--seed-dimension-x1_5)",
         "minHeight": "70px",
         "paddingX": "var(--seed-dimension-x6)",
-        /** 이 값은 상단 safe-area inset과 합산하여 적용합니다. */
+        /** 이 값은 상단 inset과 합산하여 적용합니다. */
         "paddingTop": "var(--seed-dimension-x6)",
         /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
         "paddingBottom": "var(--seed-dimension-x4)",
@@ -40,7 +40,7 @@ export declare const vars: {
       },
       "footer": {
         "paddingX": "var(--seed-dimension-x6)",
-        /** 이 값은 상단 safe-area inset과 합산하여 적용합니다. */
+        /** 이 값은 상단 inset과 합산하여 적용합니다. */
         "paddingTop": "var(--seed-dimension-x4)",
         /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
         "paddingBottom": "var(--seed-dimension-x6)"
@@ -72,24 +72,27 @@ export declare const vars: {
   },
   "sizeSmall": {
     "enabled": {
-      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      /** 하단 inset을 content의 하단 패딩으로 적용합니다. */
       "content": {
+        /** content 영역의 너비입니다. 패널은 붙는 쪽의 inset만큼 더 넓어지고, 늘어난 영역까지 배경으로 채워 화면 끝에 닿습니다. 소비자가 지정한 너비도 같은 방식으로 적용합니다. */
         "width": "480px"
       }
     }
   },
   "sizeMedium": {
     "enabled": {
-      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      /** 하단 inset을 content의 하단 패딩으로 적용합니다. */
       "content": {
+        /** content 영역의 너비입니다. 패널은 붙는 쪽의 inset만큼 더 넓어지고, 늘어난 영역까지 배경으로 채워 화면 끝에 닿습니다. 소비자가 지정한 너비도 같은 방식으로 적용합니다. */
         "width": "720px"
       }
     }
   },
   "sizeLarge": {
     "enabled": {
-      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      /** 하단 inset을 content의 하단 패딩으로 적용합니다. */
       "content": {
+        /** content 영역의 너비입니다. 패널은 붙는 쪽의 inset만큼 더 넓어지고, 늘어난 영역까지 배경으로 채워 화면 끝에 닿습니다. 소비자가 지정한 너비도 같은 방식으로 적용합니다. */
         "width": "960px"
       }
     }

package/vars/component/snackbar.d.ts

@@ -1,6 +1,7 @@
 export declare const vars: {
   "base": {
     "enabled": {
+      /** region은 좌우와 하단 안전 영역 경계 안쪽에 배치되므로, paddingX와 하단 쪽 paddingY는 안전 영역 경계부터 잽니다. */
       "region": {
         "paddingX": "var(--seed-dimension-x2)",
         "paddingY": "var(--seed-dimension-x2)",