@seed-design/css 1.2.9 → 1.2.11

package/recipes/app-screen.layered.css

@@ -70,143 +70,11 @@
     transform: translate3d(0, 0, 0);
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    --seed-enter-translate-x: 100%;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-    --seed-exit-translate-x: 100%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [data-global-transition-state="enter-done"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    --seed-enter-translate-x: var(--swipe-back-displacement, 0);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(0, 0, 0);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(100%, 0, 0);
-    animation: none !important;
-  }
-
-  [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
-    --seed-exit-translate-x: -30%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
-    --seed-enter-translate-x: calc(-30% + var(--swipe-back-displacement, 0) * .3);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
-    transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * .3), 0, 0);
-    --seed-exit-translate-x: -30%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * .3), 0, 0);
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(-30%, 0, 0);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(0, 0, 0);
-    animation: none !important;
-  }
-
   .seed-app-screen__dim--transitionStyle_slideFromRightIOS {
     background: var(--seed-color-bg-overlay);
     height: 100%;
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [data-global-transition-state="enter-done"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    opacity: 0;
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    animation: none !important;
-  }
-
   .seed-app-screen__root--transitionStyle_fadeFromBottomAndroid {
     --z-index-dim: calc(var(--z-index-base) + 0);
     --z-index-layer: calc(var(--z-index-base) + 3);
@@ -219,50 +87,10 @@
     height: 160px;
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
-    transform: translate3d(0, -8vh, 0);
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
-    opacity: 1;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .15s linear forwards seed-exit;
-    transform: translate3d(0, -8vh, 0);
-  }
-
   .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid {
     transform: translate3d(0, 0, 0);
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 8vh;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
-    opacity: 1;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 8vh;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .15s linear forwards seed-exit;
-    transform: translate3d(0, 0, 0);
-  }
-
   .seed-app-screen__root--transitionStyle_fadeIn {
     --z-index-dim: calc(var(--z-index-base) + 0);
     --z-index-layer: calc(var(--z-index-base) + 3);
@@ -274,24 +102,6 @@
     display: none;
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_fadeIn[data-activity-is-top] {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .3s ease-out seed-enter;
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_fadeIn[data-activity-is-top] {
-    opacity: 1;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .15s ease-in forwards seed-exit;
-  }
-
   .seed-app-screen__layer--layerOffsetTop_safeArea {
     padding-top: var(--seed-safe-area-top);
   }

package/recipes/notification-badge.css

@@ -17,13 +17,14 @@
     border-radius: var(--seed-radius-full)
 }
 .seed-notification-badge--size_large {
+    min-width: 18px;
     min-height: 18px;
     border-radius: var(--seed-radius-full);
     padding-left: var(--seed-dimension-x1);
     padding-right: var(--seed-dimension-x1);
     padding-top: 0px;
     padding-bottom: 0px;
-    font-size: var(--seed-font-size-t1);
-    line-height: var(--seed-line-height-t1);
+    font-size: var(--seed-font-size-t1-static);
+    line-height: var(--seed-line-height-t1-static);
     font-weight: var(--seed-font-weight-bold)
 }

package/recipes/notification-badge.layered.css

@@ -21,11 +21,12 @@
 
   .seed-notification-badge--size_large {
     border-radius: var(--seed-radius-full);
+    min-width: 18px;
     min-height: 18px;
     padding-left: var(--seed-dimension-x1);
     padding-right: var(--seed-dimension-x1);
-    font-size: var(--seed-font-size-t1);
-    line-height: var(--seed-line-height-t1);
+    font-size: var(--seed-font-size-t1-static);
+    line-height: var(--seed-line-height-t1-static);
     font-weight: var(--seed-font-weight-bold);
     padding-top: 0;
     padding-bottom: 0;

package/vars/component/checkmark.d.ts

@@ -45,7 +45,6 @@ export declare const vars: {
   },
   /**
    * - `variant=square`: 필수 선택 항목이고 사용자가 해당 내용을 인지해야 하는 경우 사용합니다.
-   * - `tone=brand`: [deprecated] 주요 버튼 등의 핵심 액션과 시각적으로 충돌하기에 더 이상 사용하지 않습니다.
    */
   "variantSquareToneBrand": {
     "enabledSelected": {
@@ -109,7 +108,6 @@ export declare const vars: {
   },
   /**
    * - `variant=ghost`: 필수 선택 항목이 아니고, 3개 이하 항목으로 구성되는 경우 사용하는 것을 권장합니다.
-   * - `tone=brand`: [deprecated] 주요 버튼 등의 핵심 액션과 시각적으로 충돌하기에 더 이상 사용하지 않습니다.
    */
   "variantGhostToneBrand": {
     "enabledSelected": {

package/vars/component/index.d.ts

@@ -73,5 +73,7 @@ export { vars as tagGroup } from "./tag-group";
 export { vars as textButton } from "./text-button";
 export { vars as textInput } from "./text-input";
 export { vars as toggleButton } from "./toggle-button";
+export { vars as topNavigationIconButton } from "./top-navigation-icon-button";
+export { vars as topNavigationTextButton } from "./top-navigation-text-button";
 export { vars as topNavigation } from "./top-navigation";
 export { vars as typography } from "./typography";

package/vars/component/index.mjs

@@ -73,5 +73,7 @@ export { vars as tagGroup } from "./tag-group.mjs";
 export { vars as textButton } from "./text-button.mjs";
 export { vars as textInput } from "./text-input.mjs";
 export { vars as toggleButton } from "./toggle-button.mjs";
+export { vars as topNavigationIconButton } from "./top-navigation-icon-button.mjs";
+export { vars as topNavigationTextButton } from "./top-navigation-text-button.mjs";
 export { vars as topNavigation } from "./top-navigation.mjs";
 export { vars as typography } from "./typography.mjs";

package/vars/component/notification-badge.d.ts

@@ -10,11 +10,12 @@ export declare const vars: {
     }
   },
   /**
-   * 라벨을 포함해 구체적인 알림 수나 상태 정보를 제공합니다.
+   * 라벨을 포함해 구체적인 알림 수나 상태 정보를 제공합니다. 세부 정보가 중요하고 충분한 공간이 있을 때 사용합니다. 내부 라벨을 반드시 포함해야 합니다.
    */
   "sizeLarge": {
     "enabled": {
       "root": {
+        "minWidth": "18px",
         "minHeight": "18px",
         "paddingX": "var(--seed-dimension-x1)",
         "paddingY": "0px",
@@ -24,14 +25,14 @@ export declare const vars: {
         "textAttachedGap": "2px"
       },
       "label": {
-        "fontSize": "var(--seed-font-size-t1)",
-        "lineHeight": "var(--seed-line-height-t1)",
+        "fontSize": "var(--seed-font-size-t1-static)",
+        "lineHeight": "var(--seed-line-height-t1-static)",
         "fontWeight": "var(--seed-font-weight-bold)"
       }
     }
   },
   /**
-   * 간결한 도트 형태로, 텍스트 없이 상태 변화만 표시합니다.
+   * 간결한 도트 형태로, 텍스트 없이 상태 변화만 표시합니다. 알림의 존재 여부만 중요하거나 공간이 제한된 경우에 적합합니다. 내부 라벨은 지원하지 않습니다.
    */
   "sizeSmall": {
     "enabled": {

package/vars/component/notification-badge.mjs

@@ -12,6 +12,7 @@ export const vars = {
   "sizeLarge": {
     "enabled": {
       "root": {
+        "minWidth": "18px",
         "minHeight": "18px",
         "paddingX": "var(--seed-dimension-x1)",
         "paddingY": "0px",
@@ -21,8 +22,8 @@ export const vars = {
         "textAttachedGap": "2px"
       },
       "label": {
-        "fontSize": "var(--seed-font-size-t1)",
-        "lineHeight": "var(--seed-line-height-t1)",
+        "fontSize": "var(--seed-font-size-t1-static)",
+        "lineHeight": "var(--seed-line-height-t1-static)",
         "fontWeight": "var(--seed-font-weight-bold)"
       }
     }

package/vars/component/radiomark.d.ts

@@ -24,9 +24,6 @@ export declare const vars: {
       }
     }
   },
-  /**
-   * [deprecated] 주요 버튼 등의 핵심 액션과 시각적으로 충돌하기에 더 이상 사용하지 않습니다.
-   */
   "toneBrand": {
     "enabledSelected": {
       "root": {

package/vars/component/switchmark.d.ts

@@ -33,9 +33,6 @@ export declare const vars: {
       }
     }
   },
-  /**
-   * [deprecated] 주요 버튼 등의 핵심 액션과 시각적으로 충돌하기에 더 이상 사용하지 않습니다.
-   */
   "toneBrand": {
     "enabled": {
       "thumb": {

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

@@ -0,0 +1,36 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "44px"
+      },
+      "icon": {
+        "size": "24px"
+      }
+    }
+  },
+  "toneLayer": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "toneTransparent": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/top-navigation-icon-button.mjs

@@ -0,0 +1,36 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "44px"
+      },
+      "icon": {
+        "size": "24px"
+      }
+    }
+  },
+  "toneLayer": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "toneTransparent": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "height": "44px",
+        "paddingX": "var(--seed-dimension-x2_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-medium)",
+        "maxFontSizeScale": "1.2",
+        "minFontSizeScale": "1",
+        "maxLineHeightScale": "1.2",
+        "minLineHeightScale": "1"
+      }
+    }
+  },
+  "toneLayer": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "toneTransparent": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "themeIos": {
+    "enabled": {
+      "root": {
+        /** 버튼 레이블이 길어졌을 때 ellipsis 말줄임을 시작할 최대 너비입니다. Top Navigation main slot이 충분한 공간을 차지할 수 있도록 하기 위해 폰트 스케일링의 영향을 받지 않는 px 값을 사용합니다. */
+        "maxWidth": "96px"
+      }
+    }
+  },
+  "themeAndroid": {}
+}

package/vars/component/top-navigation-text-button.mjs

@@ -0,0 +1,51 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "height": "44px",
+        "paddingX": "var(--seed-dimension-x2_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-medium)",
+        "maxFontSizeScale": "1.2",
+        "minFontSizeScale": "1",
+        "maxLineHeightScale": "1.2",
+        "minLineHeightScale": "1"
+      }
+    }
+  },
+  "toneLayer": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "toneTransparent": {
+    "enabled": {
+      "label": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    },
+    "disabled": {
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "themeIos": {
+    "enabled": {
+      "root": {
+        "maxWidth": "96px"
+      }
+    }
+  },
+  "themeAndroid": {}
+}

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

@@ -1,28 +1,27 @@
 export declare const vars: {
-  "themeCupertino": {
+  "themeIos": {
     "enabled": {
       "root": {
-        "minHeight": "44px",
+        "height": "44px",
         "paddingX": "var(--seed-dimension-x4)"
-      },
-      "icon": {
-        "size": "24px",
-        "targetSize": "44px"
       }
     }
   },
   "themeAndroid": {
     "enabled": {
       "root": {
-        "minHeight": "56px",
+        "height": "56px",
         "paddingX": "var(--seed-dimension-x4)"
       },
-      "icon": {
-        "size": "24px",
-        "targetSize": "44px"
+      /** title과 subtitle을 포함하는 영역입니다. */
+      "main": {
+        "paddingLeft": "16px"
       }
     }
   },
+  /**
+   * color를 $color.bg.layer-basement 등으로 변경하여 사용할 수 있습니다.
+   */
   "toneLayer": {
     "enabled": {
       "root": {
@@ -33,25 +32,35 @@ export declare const vars: {
       },
       "subtitle": {
         "color": "var(--seed-color-fg-neutral-muted)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral)"
       }
     }
   },
   "toneTransparent": {
     "enabled": {
-      "root": {
-        "color": "#00000000"
-      },
       "title": {
         "color": "var(--seed-color-palette-static-white)"
       },
       "subtitle": {
         "color": "var(--seed-color-palette-static-white)"
-      },
-      "icon": {
-        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  /**
+   * - `gradient=false`: false로 사용하는 것을 권장하지 않습니다. gradient 없이 사용하면 Top Navigation의 콘텐츠 가독성을 직접 확보해야 합니다. 스크린 배경 색상이 Top Navigation에 보이기를 원하는 경우 tone=layer를 사용하세요.
+   */
+  "toneTransparentGradientFalse": {
+    "enabled": {
+      "root": {
+        "color": "#00000000"
+      }
+    }
+  },
+  "toneTransparentGradientTrue": {
+    "enabled": {
+      "root": {
+        "gradient": "#00000059 0%, #00000000 100%",
+        /** gradient가 표시될 때 하단 아래로 gradient가 확장되는 길이입니다. */
+        "bleedBottom": "var(--seed-dimension-x5)"
       }
     }
   },
@@ -63,26 +72,39 @@ export declare const vars: {
       }
     }
   },
+  "dividerFalse": {},
   "titleLayoutTitleOnly": {
     "enabled": {
       "title": {
-        "fontSize": "var(--seed-font-size-t6-static)",
+        "fontSize": "var(--seed-font-size-t6)",
         "fontWeight": "var(--seed-font-weight-bold)",
-        "lineHeight": "var(--seed-line-height-t6-static)"
+        "lineHeight": "var(--seed-line-height-t6)",
+        "maxFontSizeScale": "1.2",
+        "minFontSizeScale": "1",
+        "maxLineHeightScale": "1.2",
+        "minLineHeightScale": "1"
       }
     }
   },
   "titleLayoutWithSubtitle": {
     "enabled": {
       "title": {
-        "fontSize": "var(--seed-font-size-t5-static)",
+        "fontSize": "var(--seed-font-size-t5)",
         "fontWeight": "var(--seed-font-weight-bold)",
-        "lineHeight": "var(--seed-line-height-t5-static)"
+        "lineHeight": "var(--seed-line-height-t5)",
+        "maxFontSizeScale": "1.2",
+        "minFontSizeScale": "1",
+        "maxLineHeightScale": "1.2",
+        "minLineHeightScale": "1"
       },
       "subtitle": {
-        "fontSize": "var(--seed-font-size-t2-static)",
+        "fontSize": "var(--seed-font-size-t2)",
         "fontWeight": "var(--seed-font-weight-regular)",
-        "lineHeight": "var(--seed-line-height-t2-static)"
+        "lineHeight": "var(--seed-line-height-t2)",
+        "maxFontSizeScale": "1.2",
+        "minFontSizeScale": "1",
+        "maxLineHeightScale": "1.2",
+        "minLineHeightScale": "1"
       }
     }
   }