@seed-design/lynx-css 0.1.1-alpha.0 → 0.2.0-alpha.3

package/recipes/tag-group-item.css

@@ -1,75 +1,33 @@
 .seed-tag-group-item__root {
-    display: var(--tag-group-item-display);
+    display: flex;
+    flex-direction: row;
     align-items: center;
-    flex-shrink: var(--seed-box-flex-shrink, 1);
-    min-width: 0;
-}
-.seed-tag-group-item__label {
-    display: inline;
-    min-width: 0;
-    overflow: var(--tag-group-item-overflow);
-    text-overflow: var(--tag-group-item-text-overflow);
-}
-.seed-tag-group-item__label:not(:first-child) {
-    margin-left: var(--seed-dimension-x0_5);
-}
-.seed-tag-group-item__label:not(:last-child) {
-    margin-right: var(--seed-dimension-x0_5);
-}
-.seed-tag-group-item__root--size_t2 {
-    --seed-prefix-icon-size: var(--seed-dimension-x3);
-    --seed-suffix-icon-size: var(--seed-dimension-x3);
-    --seed-icon-size: var(--seed-dimension-x3);
+    flex-shrink: 0
 }
 .seed-tag-group-item__label--size_t2 {
     font-size: var(--seed-font-size-t2);
-    line-height: var(--seed-line-height-t2);
-}
-.seed-tag-group-item__root--size_t3 {
-    --seed-prefix-icon-size: 13px;
-    --seed-suffix-icon-size: 13px;
-    --seed-icon-size: 13px;
+    line-height: var(--seed-line-height-t2)
 }
 .seed-tag-group-item__label--size_t3 {
     font-size: var(--seed-font-size-t3);
-    line-height: var(--seed-line-height-t3);
-}
-.seed-tag-group-item__root--size_t4 {
-    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
-    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
-    --seed-icon-size: var(--seed-dimension-x3_5);
+    line-height: var(--seed-line-height-t3)
 }
 .seed-tag-group-item__label--size_t4 {
     font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
+    line-height: var(--seed-line-height-t4)
 }
 .seed-tag-group-item__label--weight_regular {
-    font-weight: var(--seed-font-weight-regular);
+    font-weight: var(--seed-font-weight-regular)
 }
 .seed-tag-group-item__label--weight_bold {
-    font-weight: var(--seed-font-weight-bold);
-}
-.seed-tag-group-item__root--tone_neutralSubtle {
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral-subtle);
-    --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
-    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
+    font-weight: var(--seed-font-weight-bold)
 }
 .seed-tag-group-item__label--tone_neutralSubtle {
-    color: var(--seed-color-fg-neutral-subtle);
-}
-.seed-tag-group-item__root--tone_neutral {
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
-    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
-    --seed-icon-color: var(--seed-color-fg-neutral);
+    color: var(--seed-color-fg-neutral-subtle)
 }
 .seed-tag-group-item__label--tone_neutral {
-    color: var(--seed-color-fg-neutral);
-}
-.seed-tag-group-item__root--tone_brand {
-    --seed-prefix-icon-color: var(--seed-color-fg-brand);
-    --seed-suffix-icon-color: var(--seed-color-fg-brand);
-    --seed-icon-color: var(--seed-color-fg-brand);
+    color: var(--seed-color-fg-neutral)
 }
 .seed-tag-group-item__label--tone_brand {
-    color: var(--seed-color-fg-brand);
+    color: var(--seed-color-fg-brand)
 }

package/recipes/tag-group-item.layered.css

@@ -1,30 +1,9 @@
 @layer seed-components {
   .seed-tag-group-item__root {
-    display: var(--tag-group-item-display);
-    flex-shrink: var(--seed-box-flex-shrink, 1);
+    flex-direction: row;
+    flex-shrink: 0;
     align-items: center;
-    min-width: 0;
-  }
-
-  .seed-tag-group-item__label {
-    min-width: 0;
-    overflow: var(--tag-group-item-overflow);
-    text-overflow: var(--tag-group-item-text-overflow);
-    display: inline;
-  }
-
-  .seed-tag-group-item__label:not(:first-child) {
-    margin-left: var(--seed-dimension-x0_5);
-  }
-
-  .seed-tag-group-item__label:not(:last-child) {
-    margin-right: var(--seed-dimension-x0_5);
-  }
-
-  .seed-tag-group-item__root--size_t2 {
-    --seed-prefix-icon-size: var(--seed-dimension-x3);
-    --seed-suffix-icon-size: var(--seed-dimension-x3);
-    --seed-icon-size: var(--seed-dimension-x3);
+    display: flex;
   }
 
   .seed-tag-group-item__label--size_t2 {
@@ -32,23 +11,11 @@
     line-height: var(--seed-line-height-t2);
   }
 
-  .seed-tag-group-item__root--size_t3 {
-    --seed-prefix-icon-size: 13px;
-    --seed-suffix-icon-size: 13px;
-    --seed-icon-size: 13px;
-  }
-
   .seed-tag-group-item__label--size_t3 {
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3);
   }
 
-  .seed-tag-group-item__root--size_t4 {
-    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
-    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
-    --seed-icon-size: var(--seed-dimension-x3_5);
-  }
-
   .seed-tag-group-item__label--size_t4 {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -62,32 +29,14 @@
     font-weight: var(--seed-font-weight-bold);
   }
 
-  .seed-tag-group-item__root--tone_neutralSubtle {
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral-subtle);
-    --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
-    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
-  }
-
   .seed-tag-group-item__label--tone_neutralSubtle {
     color: var(--seed-color-fg-neutral-subtle);
   }
 
-  .seed-tag-group-item__root--tone_neutral {
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
-    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
-    --seed-icon-color: var(--seed-color-fg-neutral);
-  }
-
   .seed-tag-group-item__label--tone_neutral {
     color: var(--seed-color-fg-neutral);
   }
 
-  .seed-tag-group-item__root--tone_brand {
-    --seed-prefix-icon-color: var(--seed-color-fg-brand);
-    --seed-suffix-icon-color: var(--seed-color-fg-brand);
-    --seed-icon-color: var(--seed-color-fg-brand);
-  }
-
   .seed-tag-group-item__label--tone_brand {
     color: var(--seed-color-fg-brand);
   }

package/recipes/tag-group.css

@@ -1,6 +1,16 @@
+.seed-tag-group__root {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%
+}
 .seed-tag-group__separator {
     color: var(--seed-color-palette-gray-600);
-    font-weight: var(--seed-font-weight-regular)
+    font-weight: var(--seed-font-weight-regular);
+    margin-left: var(--seed-dimension-x0_5);
+    margin-right: var(--seed-dimension-x0_5);
+    flex-shrink: 0
 }
 .seed-tag-group__separator--size_t2 {
     font-size: var(--seed-font-size-t2);
@@ -13,30 +23,4 @@
 .seed-tag-group__separator--size_t4 {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4)
-}
-.seed-tag-group__root--truncate_true {
-    display: inline-flex;
-    align-items: center;
-    max-width: 100%;
-    --tag-group-item-display: inline-flex;
-    --tag-group-item-overflow: hidden;
-    --tag-group-item-text-overflow: ellipsis;
-    --tag-group-item-white-space: nowrap
-}
-.seed-tag-group__root--truncate_false {
-    display: inline-block;
-    font-size: 0;
-    --tag-group-item-display: inline;
-    --tag-group-item-overflow: visible;
-    --tag-group-item-text-overflow: clip;
-    --tag-group-item-white-space: normal
-}
-.seed-tag-group__root--size_t2-truncate_false {
-    line-height: var(--seed-line-height-t2)
-}
-.seed-tag-group__root--size_t3-truncate_false {
-    line-height: var(--seed-line-height-t3)
-}
-.seed-tag-group__root--size_t4-truncate_false {
-    line-height: var(--seed-line-height-t4)
 }

package/recipes/tag-group.d.ts

@@ -3,10 +3,6 @@ declare interface TagGroupVariant {
   * @default "t2"
   */
   size: "t2" | "t3" | "t4";
-/**
-  * @default false
-  */
-  truncate: boolean;
 }
 
 declare type TagGroupVariantMap = {

package/recipes/tag-group.layered.css

@@ -1,7 +1,17 @@
 @layer seed-components {
+  .seed-tag-group__root {
+    flex-flow: wrap;
+    align-items: center;
+    width: 100%;
+    display: flex;
+  }
+
   .seed-tag-group__separator {
     color: var(--seed-color-palette-gray-600);
     font-weight: var(--seed-font-weight-regular);
+    margin-left: var(--seed-dimension-x0_5);
+    margin-right: var(--seed-dimension-x0_5);
+    flex-shrink: 0;
   }
 
   .seed-tag-group__separator--size_t2 {
@@ -18,35 +28,4 @@
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
   }
-
-  .seed-tag-group__root--truncate_true {
-    --tag-group-item-display: inline-flex;
-    --tag-group-item-overflow: hidden;
-    --tag-group-item-text-overflow: ellipsis;
-    --tag-group-item-white-space: nowrap;
-    align-items: center;
-    max-width: 100%;
-    display: inline-flex;
-  }
-
-  .seed-tag-group__root--truncate_false {
-    --tag-group-item-display: inline;
-    --tag-group-item-overflow: visible;
-    --tag-group-item-text-overflow: clip;
-    --tag-group-item-white-space: normal;
-    font-size: 0;
-    display: inline-block;
-  }
-
-  .seed-tag-group__root--size_t2-truncate_false {
-    line-height: var(--seed-line-height-t2);
-  }
-
-  .seed-tag-group__root--size_t3-truncate_false {
-    line-height: var(--seed-line-height-t3);
-  }
-
-  .seed-tag-group__root--size_t4-truncate_false {
-    line-height: var(--seed-line-height-t4);
-  }
 }

package/recipes/tag-group.layered.mjs

@@ -13,34 +13,16 @@ const tagGroupSlotNames = [
 ];
 
 const defaultVariant = {
-  "size": "t2",
-  "truncate": false
+  "size": "t2"
 };
 
-const compoundVariants = [
-  {
-    "size": "t2",
-    "truncate": false
-  },
-  {
-    "size": "t3",
-    "truncate": false
-  },
-  {
-    "size": "t4",
-    "truncate": false
-  }
-];
+const compoundVariants = [];
 
 export const tagGroupVariantMap = {
   "size": [
     "t2",
     "t3",
     "t4"
-  ],
-  "truncate": [
-    true,
-    false
   ]
 };
 

package/recipes/tag-group.mjs

@@ -13,34 +13,16 @@ const tagGroupSlotNames = [
 ];
 
 const defaultVariant = {
-  "size": "t2",
-  "truncate": false
+  "size": "t2"
 };
 
-const compoundVariants = [
-  {
-    "size": "t2",
-    "truncate": false
-  },
-  {
-    "size": "t3",
-    "truncate": false
-  },
-  {
-    "size": "t4",
-    "truncate": false
-  }
-];
+const compoundVariants = [];
 
 export const tagGroupVariantMap = {
   "size": [
     "t2",
     "t3",
     "t4"
-  ],
-  "truncate": [
-    true,
-    false
   ]
 };
 

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/content-placeholder.d.ts

@@ -6,7 +6,7 @@ export declare const vars: {
       },
       "asset": {
         "minWidth": "var(--seed-dimension-x4)",
-        "maxWidth": "64px",
+        "maxWidth": "160px",
         /** root slot 대한 asset slot의 높이 비율입니다. */
         "heightFraction": "0.5",
         "color": "var(--seed-color-palette-gray-400)"

package/vars/component/content-placeholder.mjs

@@ -6,7 +6,7 @@ export const vars = {
       },
       "asset": {
         "minWidth": "var(--seed-dimension-x4)",
-        "maxWidth": "64px",
+        "maxWidth": "160px",
         "heightFraction": "0.5",
         "color": "var(--seed-color-palette-gray-400)"
       }

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/menu-sheet.d.ts

@@ -23,6 +23,7 @@ export declare const vars: {
       },
       "header": {
         "gap": "var(--seed-dimension-x1)",
+        "paddingTop": "var(--seed-dimension-x2)",
         "paddingBottom": "var(--seed-dimension-x4)"
       },
       "title": {

package/vars/component/menu-sheet.mjs

@@ -23,6 +23,7 @@ export const vars = {
       },
       "header": {
         "gap": "var(--seed-dimension-x1)",
+        "paddingTop": "var(--seed-dimension-x2)",
         "paddingBottom": "var(--seed-dimension-x4)"
       },
       "title": {

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": {}
+}