@seed-design/css 2.1.3 → 2.2.0

package/recipes/accordion.css

@@ -26,8 +26,7 @@
     padding: 0;
     font-family: inherit;
     text-align: start;
-    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);
     transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
@@ -102,36 +101,30 @@
     content: '';
     position: absolute;
     bottom: 0;
-    left: var(--seed-dimension-x3);
-    right: var(--seed-dimension-x3);
+    inset-inline: var(--seed-dimension-x3);
     height: 1px;
     background-color: var(--seed-color-stroke-neutral-subtle);
 }
 .seed-accordion__trigger--variant_inline::before {
     content: '';
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     z-index: -1;
-    transition-property: background-color, left, right, border-radius;
+    transition-property: background-color, inset-inline, border-radius;
     transition-duration: var(--seed-duration-color-transition);
     transition-timing-function: var(--seed-timing-function-easing);
 }
 @media (hover: hover) and (pointer: fine) {
     .seed-accordion__trigger--variant_inline:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover])::before {
         background-color: var(--seed-color-bg-transparent-pressed);
-        left: var(--seed-dimension-x1_5);
-        right: var(--seed-dimension-x1_5);
+        inset-inline: var(--seed-dimension-x1_5);
         border-radius: var(--seed-dimension-x2_5);
     }
 }
 @media not all and (hover: hover) and (pointer: fine) {
     .seed-accordion__trigger--variant_inline:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active])::before {
         background-color: var(--seed-color-bg-transparent-pressed);
-        left: var(--seed-dimension-x1_5);
-        right: var(--seed-dimension-x1_5);
+        inset-inline: var(--seed-dimension-x1_5);
         border-radius: var(--seed-dimension-x2_5);
     }
 }
@@ -143,10 +136,7 @@
 .seed-accordion__trigger--variant_separated::before {
     content: '';
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     z-index: -1;
     transition-property: background-color;
     transition-duration: var(--seed-duration-color-transition);
@@ -163,8 +153,7 @@
     }
 }
 .seed-accordion__trigger--size_medium {
-    padding-top: var(--seed-dimension-x4);
-    padding-bottom: var(--seed-dimension-x4);
+    padding-block: var(--seed-dimension-x4);
 }
 .seed-accordion__prefix--size_medium {
     margin-right: var(--seed-dimension-x3);
@@ -183,8 +172,7 @@
     --seed-suffix-icon-margin-left: var(--seed-dimension-x3);
 }
 .seed-accordion__trigger--size_large {
-    padding-top: var(--seed-dimension-x5);
-    padding-bottom: var(--seed-dimension-x5);
+    padding-block: var(--seed-dimension-x5);
 }
 .seed-accordion__prefix--size_large {
     margin-right: var(--seed-dimension-x3);
@@ -203,13 +191,11 @@
     --seed-suffix-icon-margin-left: var(--seed-dimension-x3);
 }
 .seed-accordion__trigger--size_responsive {
-    padding-top: var(--seed-dimension-x4);
-    padding-bottom: var(--seed-dimension-x4);
+    padding-block: var(--seed-dimension-x4);
 }
 @media (min-width: 768px) {
     .seed-accordion__trigger--size_responsive {
-        padding-top: var(--seed-dimension-x5);
-        padding-bottom: var(--seed-dimension-x5);
+        padding-block: var(--seed-dimension-x5);
     }
 }
 .seed-accordion__prefix--size_responsive {

package/recipes/accordion.layered.css

@@ -18,8 +18,7 @@
     text-align: start;
     width: 100%;
     padding: 0;
-    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);
     transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
@@ -115,8 +114,7 @@
   .seed-accordion__item--variant_inline:not(:last-child):after {
     content: "";
     bottom: 0;
-    left: var(--seed-dimension-x3);
-    right: var(--seed-dimension-x3);
+    inset-inline: var(--seed-dimension-x3);
     background-color: var(--seed-color-stroke-neutral-subtle);
     height: 1px;
     position: absolute;
@@ -125,7 +123,7 @@
   .seed-accordion__trigger--variant_inline:before {
     content: "";
     z-index: -1;
-    transition-property: background-color, left, right, border-radius;
+    transition-property: background-color, inset-inline, border-radius;
     transition-duration: var(--seed-duration-color-transition);
     transition-timing-function: var(--seed-timing-function-easing);
     position: absolute;
@@ -135,8 +133,7 @@
   @media (hover: hover) and (pointer: fine) {
     .seed-accordion__trigger--variant_inline:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
       background-color: var(--seed-color-bg-transparent-pressed);
-      left: var(--seed-dimension-x1_5);
-      right: var(--seed-dimension-x1_5);
+      inset-inline: var(--seed-dimension-x1_5);
       border-radius: var(--seed-dimension-x2_5);
     }
   }
@@ -144,8 +141,7 @@
   @media not all and (hover: hover) and (pointer: fine) {
     .seed-accordion__trigger--variant_inline:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
       background-color: var(--seed-color-bg-transparent-pressed);
-      left: var(--seed-dimension-x1_5);
-      right: var(--seed-dimension-x1_5);
+      inset-inline: var(--seed-dimension-x1_5);
       border-radius: var(--seed-dimension-x2_5);
     }
   }
@@ -179,8 +175,7 @@
   }
 
   .seed-accordion__trigger--size_medium {
-    padding-top: var(--seed-dimension-x4);
-    padding-bottom: var(--seed-dimension-x4);
+    padding-block: var(--seed-dimension-x4);
   }
 
   .seed-accordion__prefix--size_medium {
@@ -204,8 +199,7 @@
   }
 
   .seed-accordion__trigger--size_large {
-    padding-top: var(--seed-dimension-x5);
-    padding-bottom: var(--seed-dimension-x5);
+    padding-block: var(--seed-dimension-x5);
   }
 
   .seed-accordion__prefix--size_large {
@@ -229,14 +223,12 @@
   }
 
   .seed-accordion__trigger--size_responsive {
-    padding-top: var(--seed-dimension-x4);
-    padding-bottom: var(--seed-dimension-x4);
+    padding-block: var(--seed-dimension-x4);
   }
 
   @media (width >= 768px) {
     .seed-accordion__trigger--size_responsive {
-      padding-top: var(--seed-dimension-x5);
-      padding-bottom: var(--seed-dimension-x5);
+      padding-block: var(--seed-dimension-x5);
     }
   }
 

package/recipes/action-button.css

@@ -65,7 +65,8 @@
     cursor: not-allowed;
 }
 .seed-action-button {
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    scale: 1;
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
 }
 .seed-action-button--variant_brandSolid {
     background: var(--seed-color-bg-brand-solid);
@@ -296,6 +297,9 @@
     --seed-suffix-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-size: var(--seed-dimension-x3_5);
 }
+.seed-action-button--size_xsmall:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-scale-s95);
+}
 .seed-action-button--size_small {
     height: var(--seed-dimension-x9);
     border-radius: var(--seed-radius-r2);
@@ -305,6 +309,9 @@
     --seed-suffix-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-size: var(--seed-dimension-x4);
 }
+.seed-action-button--size_small:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-scale-s97);
+}
 .seed-action-button--size_medium {
     height: var(--seed-dimension-x10);
     border-radius: var(--seed-radius-r2);
@@ -314,6 +321,9 @@
     --seed-suffix-icon-size: var(--seed-dimension-x4);
     --seed-icon-size: 18px;
 }
+.seed-action-button--size_medium:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-scale-s97);
+}
 .seed-action-button--size_large {
     height: var(--seed-dimension-x13);
     border-radius: var(--seed-radius-r3);
@@ -323,6 +333,9 @@
     --seed-suffix-icon-size: 22px;
     --seed-icon-size: 22px;
 }
+.seed-action-button--size_large:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-scale-s98);
+}
 .seed-action-button--layout_withText {}
 .seed-action-button--layout_iconOnly {}
 .seed-action-button--size_xsmall-layout_withText {

package/recipes/action-button.layered.css

@@ -69,7 +69,8 @@
   }
 
   .seed-action-button {
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    scale: 1;
   }
 
   .seed-action-button--variant_brandSolid {
@@ -337,6 +338,10 @@
     --seed-icon-size: var(--seed-dimension-x3_5);
   }
 
+  .seed-action-button--size_xsmall:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-scale-s95);
+  }
+
   .seed-action-button--size_small {
     height: var(--seed-dimension-x9);
     border-radius: var(--seed-radius-r2);
@@ -347,6 +352,10 @@
     --seed-icon-size: var(--seed-dimension-x4);
   }
 
+  .seed-action-button--size_small:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-scale-s97);
+  }
+
   .seed-action-button--size_medium {
     height: var(--seed-dimension-x10);
     border-radius: var(--seed-radius-r2);
@@ -357,6 +366,10 @@
     --seed-icon-size: 18px;
   }
 
+  .seed-action-button--size_medium:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-scale-s97);
+  }
+
   .seed-action-button--size_large {
     height: var(--seed-dimension-x13);
     border-radius: var(--seed-radius-r3);
@@ -367,6 +380,10 @@
     --seed-icon-size: 22px;
   }
 
+  .seed-action-button--size_large:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-scale-s98);
+  }
+
   .seed-action-button--size_xsmall-layout_withText {
     gap: var(--seed-dimension-x1);
     --seed-box-padding-left: var(--seed-dimension-x3_5);

package/recipes/app-bar-main.css

@@ -34,10 +34,8 @@
     text-align: center;
     top: var(--seed-safe-area-top);
     bottom: 0;
-    left: 0;
-    right: 0;
-    padding-left: var(--centered-title-padding-x, 0);
-    padding-right: var(--centered-title-padding-x, 0);
+    inset-inline: 0;
+    padding-inline: var(--centered-title-padding-x, 0);
     pointer-events: none
 }
 .seed-app-bar-main__root--theme_android {

package/recipes/app-bar-main.layered.css

@@ -30,16 +30,14 @@
   .seed-app-bar-main__root--theme_cupertino {
     text-align: center;
     top: var(--seed-safe-area-top);
-    padding-left: var(--centered-title-padding-x, 0);
-    padding-right: var(--centered-title-padding-x, 0);
+    bottom: 0;
+    padding-inline: var(--centered-title-padding-x, 0);
     pointer-events: none;
     justify-content: center;
     align-items: center;
     display: flex;
     position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
   }
 
   .seed-app-bar-main__root--theme_android {

package/recipes/app-bar.css

@@ -10,10 +10,7 @@
 .seed-app-bar__background {
     position: absolute;
     pointer-events: none;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     z-index: -1;
 }
 .seed-app-bar__left {
@@ -50,8 +47,7 @@
 }
 .seed-app-bar__root--theme_cupertino {
     height: calc(44px + var(--seed-safe-area-top));
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
+    padding-inline: var(--seed-dimension-x4);
     padding-top: var(--seed-safe-area-top);
 }
 .seed-app-bar__iconButton--theme_cupertino {
@@ -70,8 +66,7 @@
 }
 .seed-app-bar__root--theme_android {
     height: calc(56px + var(--seed-safe-area-top));
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
+    padding-inline: var(--seed-dimension-x4);
     padding-top: var(--seed-safe-area-top);
 }
 .seed-app-bar__iconButton--theme_android {

package/recipes/app-bar.layered.css

@@ -55,8 +55,7 @@
 
   .seed-app-bar__root--theme_cupertino {
     height: calc(44px + var(--seed-safe-area-top));
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
+    padding-inline: var(--seed-dimension-x4);
     padding-top: var(--seed-safe-area-top);
   }
 
@@ -80,8 +79,7 @@
 
   .seed-app-bar__root--theme_android {
     height: calc(56px + var(--seed-safe-area-top));
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
+    padding-inline: var(--seed-dimension-x4);
     padding-top: var(--seed-safe-area-top);
   }
 

package/recipes/app-screen.css

@@ -2,8 +2,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
     overflow: hidden;
     --app-bar-offset: calc(var(--app-bar-height) + var(--seed-safe-area-top));
 }
@@ -12,8 +11,7 @@
     position: absolute;
     width: 100%;
     top: 0;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
 }
 .seed-app-screen__layer {
     z-index: var(--z-index-layer);
@@ -21,8 +19,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
 }
@@ -40,8 +37,7 @@
     position: absolute;
     width: 20px;
     height: 100%;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
 }
 .seed-app-screen__root--theme_cupertino {
     --app-bar-height: 44px;
@@ -100,8 +96,7 @@
     content: '';
     display: block;
     position: sticky;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
     top: 0;
     margin-bottom: calc(-1 * (66px + 400px + var(--seed-safe-area-top)));
     height: calc(66px + 400px + var(--seed-safe-area-top));

package/recipes/app-screen.layered.css

@@ -4,18 +4,16 @@
     width: 100%;
     height: 100%;
     position: absolute;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
     overflow: hidden;
   }
 
   .seed-app-screen__dim {
     z-index: var(--z-index-dim);
+    top: 0;
     width: 100%;
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
   }
 
   .seed-app-screen__layer {
@@ -25,8 +23,7 @@
     width: 100%;
     height: 100%;
     position: absolute;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
     overflow-y: scroll;
   }
 
@@ -47,8 +44,7 @@
     width: 20px;
     height: 100%;
     position: absolute;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
   }
 
   .seed-app-screen__root--theme_cupertino {
@@ -120,6 +116,7 @@
 
   .seed-app-screen__layer--tone_transparent-gradient_true:before {
     content: "";
+    inset-inline: 0;
     margin-bottom: calc(-1 * (66px + 400px + var(--seed-safe-area-top)));
     height: calc(66px + 400px + var(--seed-safe-area-top));
     pointer-events: none;
@@ -128,8 +125,6 @@
     display: block;
     position: sticky;
     top: 0;
-    left: 0;
-    right: 0;
   }
 
   .seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetBottom_none:before {

package/recipes/aspect-ratio.css

@@ -9,10 +9,7 @@
 }
 .seed-aspect-ratio > *:not(style) {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
     display: flex;

package/recipes/attachment-input-item.css

@@ -19,10 +19,7 @@
 .seed-attachment-input-item__root::before {
     content: "";
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     border-radius: inherit;
     pointer-events: none;
     -webkit-mask-image: linear-gradient(black, black), url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="12" fill="white"/></svg>');
@@ -95,10 +92,7 @@
 }
 .seed-attachment-input-item__backdrop {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -191,8 +185,7 @@
 }
 .seed-attachment-input-item__root--type_general {
     width: 160px;
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
+    padding-inline: var(--seed-dimension-x4);
 }
 .seed-attachment-input-item__root--type_general::before {
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
@@ -248,14 +241,12 @@
 .seed-attachment-input-item__badge--type_image {
     position: absolute;
     bottom: 0;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     height: var(--seed-dimension-x6);
-    padding-left: var(--seed-dimension-x1);
-    padding-right: var(--seed-dimension-x1);
+    padding-inline: var(--seed-dimension-x1);
     background-color: var(--seed-color-bg-overlay);
     border-radius: 0 0 var(--seed-radius-r3) var(--seed-radius-r3);
 }

package/recipes/attachment-input-item.layered.css

@@ -207,8 +207,7 @@
 
   .seed-attachment-input-item__root--type_general {
     width: 160px;
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
+    padding-inline: var(--seed-dimension-x4);
   }
 
   .seed-attachment-input-item__root--type_general:before {
@@ -255,18 +254,16 @@
   }
 
   .seed-attachment-input-item__badge--type_image {
+    bottom: 0;
     height: var(--seed-dimension-x6);
-    padding-left: var(--seed-dimension-x1);
-    padding-right: var(--seed-dimension-x1);
+    padding-inline: var(--seed-dimension-x1);
     background-color: var(--seed-color-bg-overlay);
     border-radius: 0 0 var(--seed-radius-r3) var(--seed-radius-r3);
     justify-content: center;
     align-items: center;
     display: flex;
     position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
   }
 
   .seed-attachment-input-item__badgeLabel--type_image {

package/recipes/attachment-input.css

@@ -2,8 +2,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--seed-dimension-x2);
-    margin-left: calc(var(--seed-attachment-input-extend-x) * -1);
-    margin-right: calc(var(--seed-attachment-input-extend-x) * -1);
+    margin-inline: calc(var(--seed-attachment-input-extend-x) * -1);
 }
 .seed-attachment-input__dropzone {
     display: flex;
@@ -14,10 +13,8 @@
     gap: var(--seed-dimension-x2);
     border: 1px dashed var(--seed-color-palette-gray-500);
     border-radius: var(--seed-radius-r3);
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
-    margin-left: var(--seed-attachment-input-extend-x);
-    margin-right: var(--seed-attachment-input-extend-x);
+    padding-inline: var(--seed-dimension-x4);
+    margin-inline: var(--seed-attachment-input-extend-x);
     transition: border-color 0.2s;
 }
 .seed-attachment-input__dropzone[data-dragging-over] {
@@ -43,8 +40,7 @@
     overflow-x: auto;
     padding-top: var(--seed-dimension-x1);
     margin-top: calc(var(--seed-dimension-x1) * -1);
-    padding-left: var(--seed-attachment-input-extend-x);
-    padding-right: var(--seed-attachment-input-extend-x);
+    padding-inline: var(--seed-attachment-input-extend-x);
 }
 .seed-attachment-input__itemGroup {
     display: flex;

package/recipes/attachment-input.layered.css

@@ -1,8 +1,7 @@
 @layer seed-components {
   .seed-attachment-input__root {
     gap: var(--seed-dimension-x2);
-    margin-left: calc(var(--seed-attachment-input-extend-x) * -1);
-    margin-right: calc(var(--seed-attachment-input-extend-x) * -1);
+    margin-inline: calc(var(--seed-attachment-input-extend-x) * -1);
     flex-direction: column;
     display: flex;
   }
@@ -14,10 +13,8 @@
     border: 1px dashed var(--seed-color-palette-gray-500);
     border-radius: var(--seed-radius-r3);
     height: 120px;
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
-    margin-left: var(--seed-attachment-input-extend-x);
-    margin-right: var(--seed-attachment-input-extend-x);
+    padding-inline: var(--seed-dimension-x4);
+    margin-inline: var(--seed-attachment-input-extend-x);
     flex-direction: column;
     transition: border-color .2s;
     display: flex;
@@ -48,8 +45,7 @@
     gap: var(--seed-dimension-x2);
     padding-top: var(--seed-dimension-x1);
     margin-top: calc(var(--seed-dimension-x1) * -1);
-    padding-left: var(--seed-attachment-input-extend-x);
-    padding-right: var(--seed-attachment-input-extend-x);
+    padding-inline: var(--seed-attachment-input-extend-x);
     display: flex;
     overflow-x: auto;
   }

package/recipes/avatar.css

@@ -12,10 +12,7 @@
 .seed-avatar__root:after {
     content: "";
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     pointer-events: none;
     border-radius: var(--seed-radius-full);
     box-shadow: inset 0 0 0 var(--avatar-stroke-width) var(--seed-color-stroke-neutral-subtle);

package/recipes/badge.css

@@ -16,10 +16,8 @@
 .seed-badge__root--size_medium {
     max-width: clamp(calc(108px * var(--seed-font-size-limit-min)), 7.5rem, calc(108px * var(--seed-font-size-limit-max)));
     min-height: var(--seed-dimension-x5);
-    padding-left: var(--seed-dimension-x1_5);
-    padding-right: var(--seed-dimension-x1_5);
-    padding-top: var(--seed-dimension-x0_5);
-    padding-bottom: var(--seed-dimension-x0_5);
+    padding-inline: var(--seed-dimension-x1_5);
+    padding-block: var(--seed-dimension-x0_5);
     border-radius: var(--seed-radius-r1);
     font-size: var(--seed-font-size-t1);
     line-height: var(--seed-line-height-t1)
@@ -27,10 +25,8 @@
 .seed-badge__root--size_large {
     max-width: clamp(calc(120px * var(--seed-font-size-limit-min)), 6.75rem, calc(120px * var(--seed-font-size-limit-max)));
     min-height: var(--seed-dimension-x6);
-    padding-left: var(--seed-dimension-x2);
-    padding-right: var(--seed-dimension-x2);
-    padding-top: var(--seed-dimension-x1);
-    padding-bottom: var(--seed-dimension-x1);
+    padding-inline: var(--seed-dimension-x2);
+    padding-block: var(--seed-dimension-x1);
     border-radius: var(--seed-radius-r1_5);
     font-size: var(--seed-font-size-t2);
     line-height: var(--seed-line-height-t2)