@seed-design/css 1.2.9 → 1.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/css",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/recipes/app-bar-main.css

@@ -12,19 +12,19 @@
     text-overflow: ellipsis
 }
 .seed-app-bar-main__title--layout_titleOnly {
-    font-size: var(--seed-font-size-t6-static);
+    font-size: clamp(calc(var(--seed-font-size-t6-static) * 1), var(--seed-font-size-t6), calc(var(--seed-font-size-t6-static) * 1.2));
     font-weight: var(--seed-font-weight-bold);
-    line-height: var(--seed-line-height-t6-static)
+    line-height: clamp(calc(var(--seed-line-height-t6-static) * 1), var(--seed-line-height-t6), calc(var(--seed-line-height-t6-static) * 1.2))
 }
 .seed-app-bar-main__title--layout_withSubtitle {
-    font-size: var(--seed-font-size-t5-static);
+    font-size: clamp(calc(var(--seed-font-size-t5-static) * 1), var(--seed-font-size-t5), calc(var(--seed-font-size-t5-static) * 1.2));
     font-weight: var(--seed-font-weight-bold);
-    line-height: var(--seed-line-height-t5-static)
+    line-height: clamp(calc(var(--seed-line-height-t5-static) * 1), var(--seed-line-height-t5), calc(var(--seed-line-height-t5-static) * 1.2))
 }
 .seed-app-bar-main__subtitle--layout_withSubtitle {
-    font-size: var(--seed-font-size-t2-static);
+    font-size: clamp(calc(var(--seed-font-size-t2-static) * 1), var(--seed-font-size-t2), calc(var(--seed-font-size-t2-static) * 1.2));
     font-weight: var(--seed-font-weight-regular);
-    line-height: var(--seed-line-height-t2-static)
+    line-height: clamp(calc(var(--seed-line-height-t2-static) * 1), var(--seed-line-height-t2), calc(var(--seed-line-height-t2-static) * 1.2))
 }
 .seed-app-bar-main__root--theme_cupertino {
     position: absolute;

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

@@ -10,21 +10,21 @@
   }
 
   .seed-app-bar-main__title--layout_titleOnly {
-    font-size: var(--seed-font-size-t6-static);
+    font-size: clamp(calc(var(--seed-font-size-t6-static) * 1), var(--seed-font-size-t6), calc(var(--seed-font-size-t6-static) * 1.2));
     font-weight: var(--seed-font-weight-bold);
-    line-height: var(--seed-line-height-t6-static);
+    line-height: clamp(calc(var(--seed-line-height-t6-static) * 1), var(--seed-line-height-t6), calc(var(--seed-line-height-t6-static) * 1.2));
   }
 
   .seed-app-bar-main__title--layout_withSubtitle {
-    font-size: var(--seed-font-size-t5-static);
+    font-size: clamp(calc(var(--seed-font-size-t5-static) * 1), var(--seed-font-size-t5), calc(var(--seed-font-size-t5-static) * 1.2));
     font-weight: var(--seed-font-weight-bold);
-    line-height: var(--seed-line-height-t5-static);
+    line-height: clamp(calc(var(--seed-line-height-t5-static) * 1), var(--seed-line-height-t5), calc(var(--seed-line-height-t5-static) * 1.2));
   }
 
   .seed-app-bar-main__subtitle--layout_withSubtitle {
-    font-size: var(--seed-font-size-t2-static);
+    font-size: clamp(calc(var(--seed-font-size-t2-static) * 1), var(--seed-font-size-t2), calc(var(--seed-font-size-t2-static) * 1.2));
     font-weight: var(--seed-font-weight-regular);
-    line-height: var(--seed-line-height-t2-static);
+    line-height: clamp(calc(var(--seed-line-height-t2-static) * 1), var(--seed-line-height-t2), calc(var(--seed-line-height-t2-static) * 1.2));
   }
 
   .seed-app-bar-main__root--theme_cupertino {

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,43 @@
+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)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+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)"
+      }
+    }
+  }
+}

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

@@ -2,24 +2,20 @@ export declare const vars: {
   "themeCupertino": {
     "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"
       }
     }
   },
@@ -33,9 +29,6 @@ export declare const vars: {
       },
       "subtitle": {
         "color": "var(--seed-color-fg-neutral-muted)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral)"
       }
     }
   },
@@ -49,9 +42,6 @@ export declare const vars: {
       },
       "subtitle": {
         "color": "var(--seed-color-palette-static-white)"
-      },
-      "icon": {
-        "color": "var(--seed-color-palette-static-white)"
       }
     }
   },
@@ -66,23 +56,35 @@ export declare const vars: {
   "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"
       }
     }
   }

package/vars/component/top-navigation.mjs

@@ -2,24 +2,19 @@ export const vars = {
   "themeCupertino": {
     "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"
+      "main": {
+        "paddingLeft": "16px"
       }
     }
   },
@@ -33,9 +28,6 @@ export const vars = {
       },
       "subtitle": {
         "color": "var(--seed-color-fg-neutral-muted)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral)"
       }
     }
   },
@@ -49,9 +41,6 @@ export const vars = {
       },
       "subtitle": {
         "color": "var(--seed-color-palette-static-white)"
-      },
-      "icon": {
-        "color": "var(--seed-color-palette-static-white)"
       }
     }
   },
@@ -66,23 +55,35 @@ export const vars = {
   "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"
       }
     }
   }