@seed-design/lynx-css 0.2.0-alpha.3 → 0.2.1

package/vars/component/chip.mjs

@@ -258,7 +258,27 @@ export const vars = {
       }
     }
   },
-  "layoutWithText": {},
+  "sizeSmallLayoutWithText": {
+    "enabled": {
+      "root": {
+        "minWidth": "44px"
+      }
+    }
+  },
+  "sizeMediumLayoutWithText": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x12)"
+      }
+    }
+  },
+  "sizeLargeLayoutWithText": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x13)"
+      }
+    }
+  },
   "sizeSmallLayoutIconOnly": {
     "enabled": {
       "root": {

package/vars/component/image-frame.d.ts

@@ -26,7 +26,7 @@ export declare const vars: {
   "strokeFalse": {},
   /**
    * 모서리를 둥글게 처리합니다.
-@deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
+@deprecated `rounded` 옵션은 @seed-design/react@2.0.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
 Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
 
    */
@@ -40,7 +40,7 @@ Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
   },
   /**
    * 모서리를 둥글게 처리하지 않습니다.
-@deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
+@deprecated `rounded` 옵션은 @seed-design/react@2.0.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
 Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
 
    */

package/vars/component/list-item.d.ts

@@ -10,9 +10,11 @@ export declare const vars: {
         "marginDuration": "var(--seed-duration-d3)",
         "marginTimingFunction": "var(--seed-timing-function-easing)",
         "borderRadiusDuration": "var(--seed-duration-d3)",
-        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
+        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)",
+        "contentScaleDuration": "var(--seed-duration-pressed-scale)",
+        "contentScaleTimingFunction": "var(--seed-timing-function-pressed-scale)"
       },
-      "content": {
+      "body": {
         "gap": "var(--seed-dimension-x0_5)",
         "paddingRight": "var(--seed-dimension-x2_5)"
       },
@@ -52,8 +54,11 @@ export declare const vars: {
     "pressed": {
       "root": {
         "color": "var(--seed-color-bg-transparent-pressed)",
+        /** pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다. 이 값은 OS 동작 줄이기 설정의 영향을 받지 않습니다. */
         "marginX": "var(--seed-dimension-x1_5)",
-        "cornerRadius": "var(--seed-dimension-x2_5)"
+        "cornerRadius": "var(--seed-dimension-x2_5)",
+        /** pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다. OS 동작 줄이기 등의 설정이 켜진 경우 이 값을 1로 변경하여 사용합니다. */
+        "contentScale": "0.97"
       }
     },
     "highlighted": {

package/vars/component/list-item.mjs

@@ -10,9 +10,11 @@ export const vars = {
         "marginDuration": "var(--seed-duration-d3)",
         "marginTimingFunction": "var(--seed-timing-function-easing)",
         "borderRadiusDuration": "var(--seed-duration-d3)",
-        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
+        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)",
+        "contentScaleDuration": "var(--seed-duration-pressed-scale)",
+        "contentScaleTimingFunction": "var(--seed-timing-function-pressed-scale)"
       },
-      "content": {
+      "body": {
         "gap": "var(--seed-dimension-x0_5)",
         "paddingRight": "var(--seed-dimension-x2_5)"
       },
@@ -53,7 +55,8 @@ export const vars = {
       "root": {
         "color": "var(--seed-color-bg-transparent-pressed)",
         "marginX": "var(--seed-dimension-x1_5)",
-        "cornerRadius": "var(--seed-dimension-x2_5)"
+        "cornerRadius": "var(--seed-dimension-x2_5)",
+        "contentScale": "0.97"
       }
     },
     "highlighted": {

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

@@ -14,7 +14,8 @@ export declare const vars: {
         "color": "var(--seed-color-bg-layer-floating)",
         "maxWidth": "480px",
         "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
-        "paddingY": "var(--seed-dimension-x4)",
+        "paddingTop": "var(--seed-dimension-x6)",
+        "paddingBottom": "var(--seed-dimension-x4)",
         "topCornerRadius": "var(--seed-radius-r5)",
         "enterDuration": "var(--seed-duration-d6)",
         "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
@@ -23,7 +24,6 @@ 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

@@ -14,7 +14,8 @@ export const vars = {
         "color": "var(--seed-color-bg-layer-floating)",
         "maxWidth": "480px",
         "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
-        "paddingY": "var(--seed-dimension-x4)",
+        "paddingTop": "var(--seed-dimension-x6)",
+        "paddingBottom": "var(--seed-dimension-x4)",
         "topCornerRadius": "var(--seed-radius-r5)",
         "enterDuration": "var(--seed-duration-d6)",
         "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
@@ -23,7 +24,6 @@ export const vars = {
       },
       "header": {
         "gap": "var(--seed-dimension-x1)",
-        "paddingTop": "var(--seed-dimension-x2)",
         "paddingBottom": "var(--seed-dimension-x4)"
       },
       "title": {

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

@@ -64,15 +64,6 @@ export declare const vars: {
       }
     }
   },
-  "dividerTrue": {
-    "enabled": {
-      "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-subtle)",
-        "strokeWidth": "1px"
-      }
-    }
-  },
-  "dividerFalse": {},
   "titleLayoutTitleOnly": {
     "enabled": {
       "title": {

package/vars/component/top-navigation.mjs

@@ -56,15 +56,6 @@ export const vars = {
       }
     }
   },
-  "dividerTrue": {
-    "enabled": {
-      "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-subtle)",
-        "strokeWidth": "1px"
-      }
-    }
-  },
-  "dividerFalse": {},
   "titleLayoutTitleOnly": {
     "enabled": {
       "title": {

package/vars/duration.d.ts

@@ -4,4 +4,5 @@ export declare const d3 = "var(--seed-duration-d3)";
 export declare const d4 = "var(--seed-duration-d4)";
 export declare const d5 = "var(--seed-duration-d5)";
 export declare const d6 = "var(--seed-duration-d6)";
-export declare const colorTransition = "var(--seed-duration-color-transition)";
+export declare const colorTransition = "var(--seed-duration-color-transition)";
+export declare const pressedScale = "var(--seed-duration-pressed-scale)";

package/vars/duration.mjs

@@ -4,4 +4,5 @@ export const d3 = "var(--seed-duration-d3)";
 export const d4 = "var(--seed-duration-d4)";
 export const d5 = "var(--seed-duration-d5)";
 export const d6 = "var(--seed-duration-d6)";
-export const colorTransition = "var(--seed-duration-color-transition)";
+export const colorTransition = "var(--seed-duration-color-transition)";
+export const pressedScale = "var(--seed-duration-pressed-scale)";

package/vars/gradient.d.ts

@@ -1,9 +1,9 @@
 /** 스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
-@deprecated `@seed-design/css@1.3.0`에서 제거될 예정입니다.
+@deprecated `@seed-design/css@2.0.0`에서 제거될 예정입니다.
  */
 export declare const fadeLayerFloating = "var(--seed-gradient-fade-layer-floating)";
 /** 스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
-@deprecated `@seed-design/css@1.3.0`에서 제거될 예정입니다.
+@deprecated `@seed-design/css@2.0.0`에서 제거될 예정입니다.
  */
 export declare const fadeLayerDefault = "var(--seed-gradient-fade-layer-default)";
 /** 반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러입니다. */

package/vars/timing-function.d.ts

@@ -3,4 +3,5 @@ export declare const easing = "var(--seed-timing-function-easing)";
 export declare const enter = "var(--seed-timing-function-enter)";
 export declare const exit = "var(--seed-timing-function-exit)";
 export declare const enterExpressive = "var(--seed-timing-function-enter-expressive)";
-export declare const exitExpressive = "var(--seed-timing-function-exit-expressive)";
+export declare const exitExpressive = "var(--seed-timing-function-exit-expressive)";
+export declare const pressedScale = "var(--seed-timing-function-pressed-scale)";

package/vars/timing-function.mjs

@@ -3,4 +3,5 @@ export const easing = "var(--seed-timing-function-easing)";
 export const enter = "var(--seed-timing-function-enter)";
 export const exit = "var(--seed-timing-function-exit)";
 export const enterExpressive = "var(--seed-timing-function-enter-expressive)";
-export const exitExpressive = "var(--seed-timing-function-exit-expressive)";
+export const exitExpressive = "var(--seed-timing-function-exit-expressive)";
+export const pressedScale = "var(--seed-timing-function-pressed-scale)";