@seed-design/css 2.1.1 → 2.1.3

package/recipes/side-panel.layered.css

@@ -42,19 +42,20 @@
     background: var(--seed-color-bg-layer-floating);
     touch-action: none;
     will-change: transform;
-    --seed-box-width-base: initial;
-    --seed-box-width-sm: var(--seed-box-width-base);
-    --seed-box-width-md: var(--seed-box-width-sm);
-    --seed-box-width-lg: var(--seed-box-width-md);
-    --seed-box-width-xl: var(--seed-box-width-lg);
-    --seed-box-width: var(--seed-box-width-base);
+    --side-panel-default-width: calc(.8 * 100vw);
+    --seed-box-width-base: var(--side-panel-default-width);
+    --seed-box-width-sm: var(--seed-box-width-base, initial);
+    --seed-box-width-md: var(--seed-box-width-sm, initial);
+    --seed-box-width-lg: var(--seed-box-width-md, initial);
+    --seed-box-width-xl: var(--seed-box-width-lg, initial);
+    --seed-box-width: var(--seed-box-width-base, initial);
     --seed-box-max-width-base: calc(.8 * 100%);
-    --seed-box-max-width-sm: var(--seed-box-max-width-base);
-    --seed-box-max-width-md: var(--seed-box-max-width-sm);
-    --seed-box-max-width-lg: var(--seed-box-max-width-md);
-    --seed-box-max-width-xl: var(--seed-box-max-width-lg);
-    --seed-box-max-width: var(--seed-box-max-width-base);
-    width: var(--seed-box-width, calc(.8 * 100vw));
+    --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
+    --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
+    --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
+    --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
+    --seed-box-max-width: var(--seed-box-max-width-base, initial);
+    width: var(--seed-box-width);
     max-width: var(--seed-box-max-width);
     padding-bottom: var(--seed-safe-area-bottom);
     flex-direction: column;
@@ -66,7 +67,7 @@
 
   @media (width >= 768px) {
     .seed-side-panel__content {
-      width: var(--seed-box-width, var(--side-panel-size-width));
+      --side-panel-default-width: var(--side-panel-size-width);
     }
   }
 
@@ -158,7 +159,7 @@
   }
 
   .seed-side-panel__header[data-show-close-button] {
-    padding-right: calc(var(--seed-dimension-x6) + 52px);
+    padding-right: calc(24px + 22px + var(--seed-dimension-x1_5));
   }
 
   .seed-side-panel__title {
@@ -180,30 +181,31 @@
   }
 
   .seed-side-panel__body {
+    box-sizing: border-box;
     --seed-box-padding-x-base: var(--seed-dimension-x6);
-    --seed-box-padding-x-sm: var(--seed-box-padding-x-base);
-    --seed-box-padding-x-md: var(--seed-box-padding-x-sm);
-    --seed-box-padding-x-lg: var(--seed-box-padding-x-md);
-    --seed-box-padding-x-xl: var(--seed-box-padding-x-lg);
-    --seed-box-padding-x: var(--seed-box-padding-x-base);
-    --seed-box-height-base: initial;
-    --seed-box-height-sm: var(--seed-box-height-base);
-    --seed-box-height-md: var(--seed-box-height-sm);
-    --seed-box-height-lg: var(--seed-box-height-md);
-    --seed-box-height-xl: var(--seed-box-height-lg);
-    --seed-box-height: var(--seed-box-height-base);
-    --seed-box-min-height-base: initial;
-    --seed-box-min-height-sm: var(--seed-box-min-height-base);
-    --seed-box-min-height-md: var(--seed-box-min-height-sm);
-    --seed-box-min-height-lg: var(--seed-box-min-height-md);
-    --seed-box-min-height-xl: var(--seed-box-min-height-lg);
-    --seed-box-min-height: var(--seed-box-min-height-base);
-    --seed-box-max-height-base: initial;
-    --seed-box-max-height-sm: var(--seed-box-max-height-base);
-    --seed-box-max-height-md: var(--seed-box-max-height-sm);
-    --seed-box-max-height-lg: var(--seed-box-max-height-md);
-    --seed-box-max-height-xl: var(--seed-box-max-height-lg);
-    --seed-box-max-height: var(--seed-box-max-height-base);
+    --seed-box-padding-x-sm: var(--seed-box-padding-x-base, initial);
+    --seed-box-padding-x-md: var(--seed-box-padding-x-sm, initial);
+    --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
+    --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
+    --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
+    --seed-box-height-base: auto;
+    --seed-box-height-sm: var(--seed-box-height-base, initial);
+    --seed-box-height-md: var(--seed-box-height-sm, initial);
+    --seed-box-height-lg: var(--seed-box-height-md, initial);
+    --seed-box-height-xl: var(--seed-box-height-lg, initial);
+    --seed-box-height: var(--seed-box-height-base, initial);
+    --seed-box-min-height-base: auto;
+    --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
+    --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
+    --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
+    --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
+    --seed-box-min-height: var(--seed-box-min-height-base, initial);
+    --seed-box-max-height-base: none;
+    --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
+    --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
+    --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
+    --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
+    --seed-box-max-height: var(--seed-box-max-height-base, initial);
     --seed-box-justify-content: initial;
     --seed-box-align-items: initial;
     padding-left: var(--seed-box-padding-x);
@@ -240,57 +242,42 @@
   }
 
   .seed-side-panel__closeButton {
+    background: var(--seed-color-bg-transparent);
     top: calc(28px + var(--seed-safe-area-top));
     border-radius: var(--seed-radius-r3);
-    background: var(--seed-color-bg-transparent);
     cursor: pointer;
+    transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     --seed-icon-size: 22px;
     --seed-icon-color: var(--seed-color-fg-neutral-subtle);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
     border: none;
     justify-content: center;
     align-items: center;
-    width: 22px;
-    height: 22px;
+    margin: -15px;
+    padding: 15px;
     display: flex;
     position: absolute;
     right: 24px;
   }
 
-  .seed-side-panel__closeButton :where(.seed-icon) {
-    transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+  .seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: var(--seed-dimension-x0_5);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .seed-side-panel__closeButton:is(:hover, [data-hover]) {
-      --seed-icon-color: var(--seed-color-fg-neutral);
+      background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
   @media not all and (hover: hover) and (pointer: fine) {
     .seed-side-panel__closeButton:is(:active, [data-active]) {
-      --seed-icon-color: var(--seed-color-fg-neutral);
+      background: var(--seed-color-bg-transparent-pressed);
     }
   }
 
-  .seed-side-panel__closeButton:after {
-    content: "";
-    border-radius: var(--seed-radius-r3);
-    outline: var(--seed-dimension-x0_5) solid transparent;
-    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
-    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
-    position: absolute;
-    inset: -15px;
-  }
-
-  .seed-side-panel__closeButton:is(:focus, [data-focus]) {
-    outline: none;
-  }
-
-  .seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]):after {
-    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
-    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
-  }
-
   .seed-side-panel__content--size_small {
     --side-panel-size-width: 480px;
   }
@@ -305,57 +292,57 @@
 
   @media (width >= 480px) {
     .seed-side-panel__content {
-      --seed-box-width: var(--seed-box-width-sm);
-      --seed-box-max-width: var(--seed-box-max-width-sm);
+      --seed-box-width: var(--seed-box-width-sm, initial);
+      --seed-box-max-width: var(--seed-box-max-width-sm, initial);
     }
 
     .seed-side-panel__body {
-      --seed-box-padding-x: var(--seed-box-padding-x-sm);
-      --seed-box-height: var(--seed-box-height-sm);
-      --seed-box-min-height: var(--seed-box-min-height-sm);
-      --seed-box-max-height: var(--seed-box-max-height-sm);
+      --seed-box-padding-x: var(--seed-box-padding-x-sm, initial);
+      --seed-box-height: var(--seed-box-height-sm, initial);
+      --seed-box-min-height: var(--seed-box-min-height-sm, initial);
+      --seed-box-max-height: var(--seed-box-max-height-sm, initial);
     }
   }
 
   @media (width >= 768px) {
     .seed-side-panel__content {
-      --seed-box-width: var(--seed-box-width-md);
-      --seed-box-max-width: var(--seed-box-max-width-md);
+      --seed-box-width: var(--seed-box-width-md, initial);
+      --seed-box-max-width: var(--seed-box-max-width-md, initial);
     }
 
     .seed-side-panel__body {
-      --seed-box-padding-x: var(--seed-box-padding-x-md);
-      --seed-box-height: var(--seed-box-height-md);
-      --seed-box-min-height: var(--seed-box-min-height-md);
-      --seed-box-max-height: var(--seed-box-max-height-md);
+      --seed-box-padding-x: var(--seed-box-padding-x-md, initial);
+      --seed-box-height: var(--seed-box-height-md, initial);
+      --seed-box-min-height: var(--seed-box-min-height-md, initial);
+      --seed-box-max-height: var(--seed-box-max-height-md, initial);
     }
   }
 
   @media (width >= 1280px) {
     .seed-side-panel__content {
-      --seed-box-width: var(--seed-box-width-lg);
-      --seed-box-max-width: var(--seed-box-max-width-lg);
+      --seed-box-width: var(--seed-box-width-lg, initial);
+      --seed-box-max-width: var(--seed-box-max-width-lg, initial);
     }
 
     .seed-side-panel__body {
-      --seed-box-padding-x: var(--seed-box-padding-x-lg);
-      --seed-box-height: var(--seed-box-height-lg);
-      --seed-box-min-height: var(--seed-box-min-height-lg);
-      --seed-box-max-height: var(--seed-box-max-height-lg);
+      --seed-box-padding-x: var(--seed-box-padding-x-lg, initial);
+      --seed-box-height: var(--seed-box-height-lg, initial);
+      --seed-box-min-height: var(--seed-box-min-height-lg, initial);
+      --seed-box-max-height: var(--seed-box-max-height-lg, initial);
     }
   }
 
   @media (width >= 1440px) {
     .seed-side-panel__content {
-      --seed-box-width: var(--seed-box-width-xl);
-      --seed-box-max-width: var(--seed-box-max-width-xl);
+      --seed-box-width: var(--seed-box-width-xl, initial);
+      --seed-box-max-width: var(--seed-box-max-width-xl, initial);
     }
 
     .seed-side-panel__body {
-      --seed-box-padding-x: var(--seed-box-padding-x-xl);
-      --seed-box-height: var(--seed-box-height-xl);
-      --seed-box-min-height: var(--seed-box-min-height-xl);
-      --seed-box-max-height: var(--seed-box-max-height-xl);
+      --seed-box-padding-x: var(--seed-box-padding-x-xl, initial);
+      --seed-box-height: var(--seed-box-height-xl, initial);
+      --seed-box-min-height: var(--seed-box-min-height-xl, initial);
+      --seed-box-max-height: var(--seed-box-max-height-xl, initial);
     }
   }
 }

package/recipes/skeleton.css

@@ -2,18 +2,18 @@
     display: inline-block;
     box-sizing: border-box;
     overflow: hidden;
-    --seed-box-width-base: initial;
-    --seed-box-width-sm: var(--seed-box-width-base);
-    --seed-box-width-md: var(--seed-box-width-sm);
-    --seed-box-width-lg: var(--seed-box-width-md);
-    --seed-box-width-xl: var(--seed-box-width-lg);
-    --seed-box-width: var(--seed-box-width-base);
-    --seed-box-height-base: initial;
-    --seed-box-height-sm: var(--seed-box-height-base);
-    --seed-box-height-md: var(--seed-box-height-sm);
-    --seed-box-height-lg: var(--seed-box-height-md);
-    --seed-box-height-xl: var(--seed-box-height-lg);
-    --seed-box-height: var(--seed-box-height-base);
+    --seed-box-width-base: auto;
+    --seed-box-width-sm: var(--seed-box-width-base, initial);
+    --seed-box-width-md: var(--seed-box-width-sm, initial);
+    --seed-box-width-lg: var(--seed-box-width-md, initial);
+    --seed-box-width-xl: var(--seed-box-width-lg, initial);
+    --seed-box-width: var(--seed-box-width-base, initial);
+    --seed-box-height-base: auto;
+    --seed-box-height-sm: var(--seed-box-height-base, initial);
+    --seed-box-height-md: var(--seed-box-height-sm, initial);
+    --seed-box-height-lg: var(--seed-box-height-md, initial);
+    --seed-box-height-xl: var(--seed-box-height-lg, initial);
+    --seed-box-height: var(--seed-box-height-base, initial);
     width: var(--seed-box-width);
     height: var(--seed-box-height);
 }
@@ -55,25 +55,25 @@
 }
 @media (min-width: 480px) {
     .seed-skeleton {
-        --seed-box-width: var(--seed-box-width-sm);
-        --seed-box-height: var(--seed-box-height-sm);
+        --seed-box-width: var(--seed-box-width-sm, initial);
+        --seed-box-height: var(--seed-box-height-sm, initial);
     }
 }
 @media (min-width: 768px) {
     .seed-skeleton {
-        --seed-box-width: var(--seed-box-width-md);
-        --seed-box-height: var(--seed-box-height-md);
+        --seed-box-width: var(--seed-box-width-md, initial);
+        --seed-box-height: var(--seed-box-height-md, initial);
     }
 }
 @media (min-width: 1280px) {
     .seed-skeleton {
-        --seed-box-width: var(--seed-box-width-lg);
-        --seed-box-height: var(--seed-box-height-lg);
+        --seed-box-width: var(--seed-box-width-lg, initial);
+        --seed-box-height: var(--seed-box-height-lg, initial);
     }
 }
 @media (min-width: 1440px) {
     .seed-skeleton {
-        --seed-box-width: var(--seed-box-width-xl);
-        --seed-box-height: var(--seed-box-height-xl);
+        --seed-box-width: var(--seed-box-width-xl, initial);
+        --seed-box-height: var(--seed-box-height-xl, initial);
     }
 }

package/recipes/skeleton.layered.css

@@ -1,18 +1,18 @@
 @layer seed-components {
   .seed-skeleton {
     box-sizing: border-box;
-    --seed-box-width-base: initial;
-    --seed-box-width-sm: var(--seed-box-width-base);
-    --seed-box-width-md: var(--seed-box-width-sm);
-    --seed-box-width-lg: var(--seed-box-width-md);
-    --seed-box-width-xl: var(--seed-box-width-lg);
-    --seed-box-width: var(--seed-box-width-base);
-    --seed-box-height-base: initial;
-    --seed-box-height-sm: var(--seed-box-height-base);
-    --seed-box-height-md: var(--seed-box-height-sm);
-    --seed-box-height-lg: var(--seed-box-height-md);
-    --seed-box-height-xl: var(--seed-box-height-lg);
-    --seed-box-height: var(--seed-box-height-base);
+    --seed-box-width-base: auto;
+    --seed-box-width-sm: var(--seed-box-width-base, initial);
+    --seed-box-width-md: var(--seed-box-width-sm, initial);
+    --seed-box-width-lg: var(--seed-box-width-md, initial);
+    --seed-box-width-xl: var(--seed-box-width-lg, initial);
+    --seed-box-width: var(--seed-box-width-base, initial);
+    --seed-box-height-base: auto;
+    --seed-box-height-sm: var(--seed-box-height-base, initial);
+    --seed-box-height-md: var(--seed-box-height-sm, initial);
+    --seed-box-height-lg: var(--seed-box-height-md, initial);
+    --seed-box-height-xl: var(--seed-box-height-lg, initial);
+    --seed-box-height: var(--seed-box-height-base, initial);
     width: var(--seed-box-width);
     height: var(--seed-box-height);
     display: inline-block;
@@ -66,29 +66,29 @@
 
   @media (width >= 480px) {
     .seed-skeleton {
-      --seed-box-width: var(--seed-box-width-sm);
-      --seed-box-height: var(--seed-box-height-sm);
+      --seed-box-width: var(--seed-box-width-sm, initial);
+      --seed-box-height: var(--seed-box-height-sm, initial);
     }
   }
 
   @media (width >= 768px) {
     .seed-skeleton {
-      --seed-box-width: var(--seed-box-width-md);
-      --seed-box-height: var(--seed-box-height-md);
+      --seed-box-width: var(--seed-box-width-md, initial);
+      --seed-box-height: var(--seed-box-height-md, initial);
     }
   }
 
   @media (width >= 1280px) {
     .seed-skeleton {
-      --seed-box-width: var(--seed-box-width-lg);
-      --seed-box-height: var(--seed-box-height-lg);
+      --seed-box-width: var(--seed-box-width-lg, initial);
+      --seed-box-height: var(--seed-box-height-lg, initial);
     }
   }
 
   @media (width >= 1440px) {
     .seed-skeleton {
-      --seed-box-width: var(--seed-box-width-xl);
-      --seed-box-height: var(--seed-box-height-xl);
+      --seed-box-width: var(--seed-box-width-xl, initial);
+      --seed-box-height: var(--seed-box-height-xl, initial);
     }
   }
 }

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

@@ -34,7 +34,7 @@ export declare const vars: {
         "minHeight": "48px"
       },
       "icon": {
-        "size": "var(--seed-dimension-x5)"
+        "size": "var(--seed-dimension-x4)"
       },
       "label": {
         "color": "var(--seed-color-palette-static-white)",

package/vars/component/floating-action-button.mjs

@@ -31,7 +31,7 @@ export const vars = {
         "minHeight": "48px"
       },
       "icon": {
-        "size": "var(--seed-dimension-x5)"
+        "size": "var(--seed-dimension-x4)"
       },
       "label": {
         "color": "var(--seed-color-palette-static-white)",

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

@@ -10,9 +10,10 @@ export declare const vars: {
       },
       /** lineIcon 아래에 내려가는 하트 아이콘입니다. */
       "fillIcon": {
-        "gradient": "var(--seed-color-palette-static-black-alpha-300) 0%, var(--seed-color-palette-static-black-alpha-300) 100%",
+        "gradient": "var(--seed-color-palette-static-black-alpha-600) 0%, var(--seed-color-palette-static-black-alpha-600) 100%",
         /** 보이는 버튼 크기입니다. */
-        "size": "var(--seed-dimension-x6)"
+        "size": "var(--seed-dimension-x6)",
+        "shadow": "0px 2px 4px 0px #00000026"
       },
       /** fillIcon 위로 올라가는 하트 아이콘입니다. */
       "lineIcon": {

package/vars/component/image-frame-reaction-button.mjs

@@ -6,8 +6,9 @@ export const vars = {
         "targetSize": "var(--seed-dimension-x10)"
       },
       "fillIcon": {
-        "gradient": "var(--seed-color-palette-static-black-alpha-300) 0%, var(--seed-color-palette-static-black-alpha-300) 100%",
-        "size": "var(--seed-dimension-x6)"
+        "gradient": "var(--seed-color-palette-static-black-alpha-600) 0%, var(--seed-color-palette-static-black-alpha-600) 100%",
+        "size": "var(--seed-dimension-x6)",
+        "shadow": "0px 2px 4px 0px #00000026"
       },
       "lineIcon": {
         "color": "var(--seed-color-palette-static-white)",

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

@@ -4,8 +4,9 @@ export declare const vars: {
       "root": {
         "color": "var(--seed-color-bg-transparent)",
         "cornerRadius": "var(--seed-radius-r3)",
-        "targetSize": "52px",
-        "size": "22px"
+        "size": "52px",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
       },
       "icon": {
         "color": "var(--seed-color-fg-neutral-subtle)",
@@ -15,6 +16,9 @@ export declare const vars: {
       }
     },
     "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      },
       "icon": {
         "color": "var(--seed-color-fg-neutral)"
       }

package/vars/component/side-panel-close-button.mjs

@@ -4,8 +4,9 @@ export const vars = {
       "root": {
         "color": "var(--seed-color-bg-transparent)",
         "cornerRadius": "var(--seed-radius-r3)",
-        "targetSize": "52px",
-        "size": "22px"
+        "size": "52px",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
       },
       "icon": {
         "color": "var(--seed-color-fg-neutral-subtle)",
@@ -15,6 +16,9 @@ export const vars = {
       }
     },
     "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      },
       "icon": {
         "color": "var(--seed-color-fg-neutral)"
       }

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

@@ -27,14 +27,16 @@ export declare const vars: {
         /** 이 값은 상단 safe-area inset과 합산하여 적용합니다. */
         "paddingTop": "var(--seed-dimension-x6)",
         /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
-        "paddingBottom": "var(--seed-dimension-x4)"
+        "paddingBottom": "var(--seed-dimension-x4)",
+        /** closeButton이 표시되는 경우 paddingRight에 추가되는 여백입니다. */
+        "closeButtonGap": "var(--seed-dimension-x1_5)"
       },
       "body": {
         "paddingX": "var(--seed-dimension-x6)",
         /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
         "paddingBottom": "var(--seed-dimension-x12)",
-        "transitionDuration": "var(--seed-duration-color-transition)",
-        "transitionTimingFunction": "var(--seed-timing-function-easing)"
+        "strokeDuration": "var(--seed-duration-color-transition)",
+        "strokeTimingFunction": "var(--seed-timing-function-easing)"
       },
       "footer": {
         "paddingX": "var(--seed-dimension-x6)",
@@ -62,8 +64,9 @@ export declare const vars: {
     },
     "scrolled": {
       "body": {
+        "strokeWidth": "1px",
         /** 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 색상입니다. */
-        "stroke": "var(--seed-color-stroke-neutral-muted)"
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
       }
     }
   },

package/vars/component/side-panel.mjs

@@ -23,13 +23,14 @@ export const vars = {
         "minHeight": "70px",
         "paddingX": "var(--seed-dimension-x6)",
         "paddingTop": "var(--seed-dimension-x6)",
-        "paddingBottom": "var(--seed-dimension-x4)"
+        "paddingBottom": "var(--seed-dimension-x4)",
+        "closeButtonGap": "var(--seed-dimension-x1_5)"
       },
       "body": {
         "paddingX": "var(--seed-dimension-x6)",
         "paddingBottom": "var(--seed-dimension-x12)",
-        "transitionDuration": "var(--seed-duration-color-transition)",
-        "transitionTimingFunction": "var(--seed-timing-function-easing)"
+        "strokeDuration": "var(--seed-duration-color-transition)",
+        "strokeTimingFunction": "var(--seed-timing-function-easing)"
       },
       "footer": {
         "paddingX": "var(--seed-dimension-x6)",
@@ -55,7 +56,8 @@ export const vars = {
     },
     "scrolled": {
       "body": {
-        "stroke": "var(--seed-color-stroke-neutral-muted)"
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
       }
     }
   },