@seed-design/css 2.1.4 → 2.2.0

package/recipes/tabs.css

@@ -93,8 +93,7 @@
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
 }
 .seed-tabs__list--triggerLayout_fill {
-    padding-left: 0px;
-    padding-right: 0px;
+    padding-inline: 0px;
     justify-content: space-around;
 }
 .seed-tabs__indicator--triggerLayout_fill {
@@ -105,12 +104,10 @@
     flex: 1;
 }
 .seed-tabs__trigger--triggerLayout_fill:is([aria-selected=true], [data-selected])[data-ssr]:after {
-    left: var(--seed-dimension-spacing-x-global-gutter);
-    right: var(--seed-dimension-spacing-x-global-gutter);
+    inset-inline: var(--seed-dimension-spacing-x-global-gutter);
 }
 .seed-tabs__list--triggerLayout_hug {
-    padding-left: var(--seed-dimension-spacing-x-global-gutter);
-    padding-right: var(--seed-dimension-spacing-x-global-gutter);
+    padding-inline: var(--seed-dimension-spacing-x-global-gutter);
     justify-content: flex-start;
 }
 .seed-tabs__indicator--triggerLayout_hug {
@@ -118,8 +115,7 @@
     width: calc(var(--indicator-width, 0px) - 2 * 0px);
 }
 .seed-tabs__trigger--triggerLayout_hug:is([aria-selected=true], [data-selected])[data-ssr]:after {
-    left: 0;
-    right: 0;
+    inset-inline: 0;
 }
 .seed-tabs__root--contentLayout_fill {
     display: flex;
@@ -144,10 +140,8 @@
 }
 .seed-tabs__trigger--size_small {
     min-height: 40px;
-    padding-left: var(--seed-dimension-x2_5);
-    padding-right: var(--seed-dimension-x2_5);
-    padding-top: var(--seed-dimension-x2_5);
-    padding-bottom: var(--seed-dimension-x2_5);
+    padding-inline: var(--seed-dimension-x2_5);
+    padding-block: var(--seed-dimension-x2_5);
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
     font-weight: var(--seed-font-weight-bold);
@@ -160,10 +154,8 @@
 }
 .seed-tabs__trigger--size_medium {
     min-height: 44px;
-    padding-left: var(--seed-dimension-x2_5);
-    padding-right: var(--seed-dimension-x2_5);
-    padding-top: var(--seed-dimension-x2_5);
-    padding-bottom: var(--seed-dimension-x2_5);
+    padding-inline: var(--seed-dimension-x2_5);
+    padding-block: var(--seed-dimension-x2_5);
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-bold);

package/recipes/tabs.layered.css

@@ -108,8 +108,7 @@
 
   .seed-tabs__list--triggerLayout_fill {
     justify-content: space-around;
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline: 0;
   }
 
   .seed-tabs__indicator--triggerLayout_fill {
@@ -122,13 +121,11 @@
   }
 
   .seed-tabs__trigger--triggerLayout_fill:is([aria-selected="true"], [data-selected])[data-ssr]:after {
-    left: var(--seed-dimension-spacing-x-global-gutter);
-    right: var(--seed-dimension-spacing-x-global-gutter);
+    inset-inline: var(--seed-dimension-spacing-x-global-gutter);
   }
 
   .seed-tabs__list--triggerLayout_hug {
-    padding-left: var(--seed-dimension-spacing-x-global-gutter);
-    padding-right: var(--seed-dimension-spacing-x-global-gutter);
+    padding-inline: var(--seed-dimension-spacing-x-global-gutter);
     justify-content: flex-start;
   }
 
@@ -138,8 +135,7 @@
   }
 
   .seed-tabs__trigger--triggerLayout_hug:is([aria-selected="true"], [data-selected])[data-ssr]:after {
-    left: 0;
-    right: 0;
+    inset-inline: 0;
   }
 
   .seed-tabs__root--contentLayout_fill {
@@ -171,10 +167,8 @@
 
   .seed-tabs__trigger--size_small {
     min-height: 40px;
-    padding-left: var(--seed-dimension-x2_5);
-    padding-right: var(--seed-dimension-x2_5);
-    padding-top: var(--seed-dimension-x2_5);
-    padding-bottom: var(--seed-dimension-x2_5);
+    padding-inline: var(--seed-dimension-x2_5);
+    padding-block: var(--seed-dimension-x2_5);
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
     font-weight: var(--seed-font-weight-bold);
@@ -190,10 +184,8 @@
 
   .seed-tabs__trigger--size_medium {
     min-height: 44px;
-    padding-left: var(--seed-dimension-x2_5);
-    padding-right: var(--seed-dimension-x2_5);
-    padding-top: var(--seed-dimension-x2_5);
-    padding-bottom: var(--seed-dimension-x2_5);
+    padding-inline: var(--seed-dimension-x2_5);
+    padding-block: var(--seed-dimension-x2_5);
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-bold);

package/recipes/text-input.css

@@ -8,10 +8,7 @@
 .seed-text-input__root::after {
     content: "";
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     border-radius: inherit;
     border-color: transparent;
     transition: border-color 0.1s var(--seed-timing-function-easing);
@@ -28,8 +25,7 @@
     align-self: stretch;
     color: var(--seed-color-fg-neutral);
     font-weight: var(--seed-font-weight-regular);
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline: 0;
 }
 .seed-text-input__value:is(input) {
     width: 0;
@@ -135,24 +131,20 @@
 }
 .seed-text-input__value--size_large:is(textarea) {
     min-height: 94px;
-    padding-top: var(--seed-dimension-x3_5);
-    padding-bottom: var(--seed-dimension-x3_5);
+    padding-block: var(--seed-dimension-x3_5);
 }
 .seed-text-input__value--size_medium:is(textarea) {
     min-height: 82px;
-    padding-top: var(--seed-dimension-x3);
-    padding-bottom: var(--seed-dimension-x3);
+    padding-block: var(--seed-dimension-x3);
 }
 .seed-text-input__value--size_responsive:is(textarea) {
     min-height: 94px;
-    padding-top: var(--seed-dimension-x3_5);
-    padding-bottom: var(--seed-dimension-x3_5);
+    padding-block: var(--seed-dimension-x3_5);
 }
 @media (min-width: 1280px) {
     .seed-text-input__value--size_responsive:is(textarea) {
         min-height: 82px;
-        padding-top: var(--seed-dimension-x3);
-        padding-bottom: var(--seed-dimension-x3);
+        padding-block: var(--seed-dimension-x3);
     }
 }
 .seed-text-input__root--variant_outline-size_large {
@@ -372,8 +364,7 @@
 .seed-text-input__root--variant_underline-size_large {
     gap: var(--seed-dimension-x2_5);
     min-height: var(--seed-dimension-x10);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
+    padding-block: var(--seed-dimension-x2);
 }
 .seed-text-input__value--variant_underline-size_large {
     font-size: var(--seed-font-size-t6);
@@ -402,8 +393,7 @@
 .seed-text-input__root--variant_underline-size_medium {
     gap: var(--seed-dimension-x2);
     min-height: 34px;
-    padding-top: var(--seed-dimension-x1_5);
-    padding-bottom: var(--seed-dimension-x1_5);
+    padding-block: var(--seed-dimension-x1_5);
 }
 .seed-text-input__value--variant_underline-size_medium {
     font-size: var(--seed-font-size-t5);
@@ -432,15 +422,13 @@
 .seed-text-input__root--variant_underline-size_responsive {
     gap: var(--seed-dimension-x2_5);
     min-height: var(--seed-dimension-x10);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
+    padding-block: var(--seed-dimension-x2);
 }
 @media (min-width: 1280px) {
     .seed-text-input__root--variant_underline-size_responsive {
         gap: var(--seed-dimension-x2);
         min-height: 34px;
-        padding-top: var(--seed-dimension-x1_5);
-        padding-bottom: var(--seed-dimension-x1_5);
+        padding-block: var(--seed-dimension-x1_5);
     }
 }
 .seed-text-input__value--variant_underline-size_responsive {

package/recipes/text-input.layered.css

@@ -28,8 +28,7 @@
     outline: none;
     flex-grow: 1;
     align-self: stretch;
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline: 0;
   }
 
   .seed-text-input__value:is(input) {
@@ -146,27 +145,23 @@
 
   .seed-text-input__value--size_large:is(textarea) {
     min-height: 94px;
-    padding-top: var(--seed-dimension-x3_5);
-    padding-bottom: var(--seed-dimension-x3_5);
+    padding-block: var(--seed-dimension-x3_5);
   }
 
   .seed-text-input__value--size_medium:is(textarea) {
     min-height: 82px;
-    padding-top: var(--seed-dimension-x3);
-    padding-bottom: var(--seed-dimension-x3);
+    padding-block: var(--seed-dimension-x3);
   }
 
   .seed-text-input__value--size_responsive:is(textarea) {
     min-height: 94px;
-    padding-top: var(--seed-dimension-x3_5);
-    padding-bottom: var(--seed-dimension-x3_5);
+    padding-block: var(--seed-dimension-x3_5);
   }
 
   @media (width >= 1280px) {
     .seed-text-input__value--size_responsive:is(textarea) {
       min-height: 82px;
-      padding-top: var(--seed-dimension-x3);
-      padding-bottom: var(--seed-dimension-x3);
+      padding-block: var(--seed-dimension-x3);
     }
   }
 
@@ -429,8 +424,7 @@
   .seed-text-input__root--variant_underline-size_large {
     gap: var(--seed-dimension-x2_5);
     min-height: var(--seed-dimension-x10);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
+    padding-block: var(--seed-dimension-x2);
   }
 
   .seed-text-input__value--variant_underline-size_large, .seed-text-input__value--variant_underline-size_large::placeholder, .seed-text-input__prefixText--variant_underline-size_large {
@@ -456,8 +450,7 @@
   .seed-text-input__root--variant_underline-size_medium {
     gap: var(--seed-dimension-x2);
     min-height: 34px;
-    padding-top: var(--seed-dimension-x1_5);
-    padding-bottom: var(--seed-dimension-x1_5);
+    padding-block: var(--seed-dimension-x1_5);
   }
 
   .seed-text-input__value--variant_underline-size_medium, .seed-text-input__value--variant_underline-size_medium::placeholder, .seed-text-input__prefixText--variant_underline-size_medium {
@@ -483,16 +476,14 @@
   .seed-text-input__root--variant_underline-size_responsive {
     gap: var(--seed-dimension-x2_5);
     min-height: var(--seed-dimension-x10);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
+    padding-block: var(--seed-dimension-x2);
   }
 
   @media (width >= 1280px) {
     .seed-text-input__root--variant_underline-size_responsive {
       gap: var(--seed-dimension-x2);
       min-height: 34px;
-      padding-top: var(--seed-dimension-x1_5);
-      padding-bottom: var(--seed-dimension-x1_5);
+      padding-block: var(--seed-dimension-x1_5);
     }
   }
 

package/recipes/toggle-button.css

@@ -132,10 +132,8 @@
     height: var(--seed-dimension-x8);
     border-radius: var(--seed-radius-full);
     gap: var(--seed-dimension-x1);
-    padding-left: var(--seed-dimension-x3_5);
-    padding-right: var(--seed-dimension-x3_5);
-    padding-top: var(--seed-dimension-x1_5);
-    padding-bottom: var(--seed-dimension-x1_5);
+    padding-inline: var(--seed-dimension-x3_5);
+    padding-block: var(--seed-dimension-x1_5);
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3);
     --size: 14px;
@@ -147,10 +145,8 @@
     height: var(--seed-dimension-x9);
     border-radius: var(--seed-radius-full);
     gap: var(--seed-dimension-x1);
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
+    padding-inline: var(--seed-dimension-x4);
+    padding-block: var(--seed-dimension-x2);
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
     --size: 14px;

package/recipes/toggle-button.layered.css

@@ -153,10 +153,8 @@
     height: var(--seed-dimension-x8);
     border-radius: var(--seed-radius-full);
     gap: var(--seed-dimension-x1);
-    padding-left: var(--seed-dimension-x3_5);
-    padding-right: var(--seed-dimension-x3_5);
-    padding-top: var(--seed-dimension-x1_5);
-    padding-bottom: var(--seed-dimension-x1_5);
+    padding-inline: var(--seed-dimension-x3_5);
+    padding-block: var(--seed-dimension-x1_5);
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3);
     --size: 14px;
@@ -169,10 +167,8 @@
     height: var(--seed-dimension-x9);
     border-radius: var(--seed-radius-full);
     gap: var(--seed-dimension-x1);
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
+    padding-inline: var(--seed-dimension-x4);
+    padding-block: var(--seed-dimension-x2);
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
     --size: 14px;

package/vars/component/action-button.d.ts

@@ -3,7 +3,9 @@ export declare const vars: {
     "enabled": {
       "root": {
         "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)"
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "scaleDuration": "var(--seed-duration-pressed-scale)",
+        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)"
       },
       "label": {
         "fontWeight": "var(--seed-font-weight-bold)"
@@ -442,6 +444,11 @@ export declare const vars: {
         "size": "14px",
         "thickness": "2px"
       }
+    },
+    "pressed": {
+      "root": {
+        "scale": "var(--seed-scale-s95)"
+      }
     }
   },
   /**
@@ -499,6 +506,11 @@ export declare const vars: {
         "size": "14px",
         "thickness": "2px"
       }
+    },
+    "pressed": {
+      "root": {
+        "scale": "var(--seed-scale-s97)"
+      }
     }
   },
   /**
@@ -556,6 +568,11 @@ export declare const vars: {
         "size": "16px",
         "thickness": "2px"
       }
+    },
+    "pressed": {
+      "root": {
+        "scale": "var(--seed-scale-s97)"
+      }
     }
   },
   /**
@@ -613,6 +630,11 @@ export declare const vars: {
         "size": "18px",
         "thickness": "2px"
       }
+    },
+    "pressed": {
+      "root": {
+        "scale": "var(--seed-scale-s98)"
+      }
     }
   },
   /**

package/vars/component/action-button.mjs

@@ -3,7 +3,9 @@ export const vars = {
     "enabled": {
       "root": {
         "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)"
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "scaleDuration": "var(--seed-duration-pressed-scale)",
+        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)"
       },
       "label": {
         "fontWeight": "var(--seed-font-weight-bold)"
@@ -376,6 +378,11 @@ export const vars = {
         "size": "14px",
         "thickness": "2px"
       }
+    },
+    "pressed": {
+      "root": {
+        "scale": "var(--seed-scale-s95)"
+      }
     }
   },
   "sizeXsmallLayoutWithText": {
@@ -419,6 +426,11 @@ export const vars = {
         "size": "14px",
         "thickness": "2px"
       }
+    },
+    "pressed": {
+      "root": {
+        "scale": "var(--seed-scale-s97)"
+      }
     }
   },
   "sizeSmallLayoutWithText": {
@@ -462,6 +474,11 @@ export const vars = {
         "size": "16px",
         "thickness": "2px"
       }
+    },
+    "pressed": {
+      "root": {
+        "scale": "var(--seed-scale-s97)"
+      }
     }
   },
   "sizeMediumLayoutWithText": {
@@ -505,6 +522,11 @@ export const vars = {
         "size": "18px",
         "thickness": "2px"
       }
+    },
+    "pressed": {
+      "root": {
+        "scale": "var(--seed-scale-s98)"
+      }
     }
   },
   "sizeLargeLayoutWithText": {

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

@@ -57,8 +57,8 @@ export declare const vars: {
         /** pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다. 이 값은 OS 동작 줄이기 설정의 영향을 받지 않습니다. */
         "marginX": "var(--seed-dimension-x1_5)",
         "cornerRadius": "var(--seed-dimension-x2_5)",
-        /** pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다. OS 동작 줄이기 등의 설정이 켜진 경우 이 값을 1로 변경하여 사용합니다. */
-        "contentScale": "0.97"
+        /** pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다. */
+        "contentScale": "var(--seed-scale-s97)"
       }
     },
     "highlighted": {

package/vars/component/list-item.mjs

@@ -56,7 +56,7 @@ export const vars = {
         "color": "var(--seed-color-bg-transparent-pressed)",
         "marginX": "var(--seed-dimension-x1_5)",
         "cornerRadius": "var(--seed-dimension-x2_5)",
-        "contentScale": "0.97"
+        "contentScale": "var(--seed-scale-s97)"
       }
     },
     "highlighted": {

package/vars/scale.d.ts

@@ -0,0 +1,3 @@
+export declare const s95 = "var(--seed-scale-s95)";
+export declare const s97 = "var(--seed-scale-s97)";
+export declare const s98 = "var(--seed-scale-s98)";

package/vars/scale.mjs

@@ -0,0 +1,3 @@
+export const s95 = "var(--seed-scale-s95)";
+export const s97 = "var(--seed-scale-s97)";
+export const s98 = "var(--seed-scale-s98)";