@seed-design/lynx-css 0.8.0 → 0.9.0

package/recipes/tabs.mjs

@@ -0,0 +1,103 @@
+import './tabs.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const tabsSlotNames = [
+  [
+    "root",
+    "seed-tabs__root"
+  ],
+  [
+    "list",
+    "seed-tabs__list"
+  ],
+  [
+    "listContent",
+    "seed-tabs__listContent"
+  ],
+  [
+    "carousel",
+    "seed-tabs__carousel"
+  ],
+  [
+    "carouselCamera",
+    "seed-tabs__carouselCamera"
+  ],
+  [
+    "content",
+    "seed-tabs__content"
+  ],
+  [
+    "indicator",
+    "seed-tabs__indicator"
+  ],
+  [
+    "trigger",
+    "seed-tabs__trigger"
+  ],
+  [
+    "triggerLabel",
+    "seed-tabs__triggerLabel"
+  ]
+];
+
+const defaultVariant = {
+  "triggerLayout": "fill",
+  "contentLayout": "hug",
+  "size": "small",
+  "stickyList": false
+};
+
+const compoundVariants = [
+  {
+    "selected": false,
+    "inCarousel": true
+  }
+];
+
+export const tabsVariantMap = {
+  "triggerLayout": [
+    "fill",
+    "hug"
+  ],
+  "contentLayout": [
+    "fill",
+    "hug"
+  ],
+  "size": [
+    "small",
+    "medium"
+  ],
+  "stickyList": [
+    true,
+    false
+  ],
+  "selected": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ],
+  "inCarousel": [
+    true,
+    false
+  ]
+};
+
+export const tabsVariantKeys = Object.keys(tabsVariantMap);
+
+export function tabs(props) {
+  return Object.fromEntries(
+    tabsSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(tabs, { splitVariantProps: (props) => splitVariantProps(props, tabsVariantMap) });
+
+// @recipe(seed): tabs

package/vars/color/stroke.d.ts

@@ -13,13 +13,13 @@ export declare const informativeSolid = "var(--seed-color-stroke-informative-sol
 export declare const informativeWeak = "var(--seed-color-stroke-informative-weak)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (contrast) */
 export declare const neutralContrast = "var(--seed-color-stroke-neutral-contrast)";
-/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted) */
+/** 의미 단위가 바뀌는 경계를 나누는 선입니다. 섹션과 섹션 사이, 콘텐츠와 액션 영역 사이, 헤더와 본문 경계처럼 한 화면에 한두 번만 등장하는 구분에 사용됩니다. (muted) */
 export declare const neutralMuted = "var(--seed-color-stroke-neutral-muted)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid) */
 export declare const neutralSolid = "var(--seed-color-stroke-neutral-solid)";
-/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle) */
+/** 반복되는 동일한 성격의 항목 사이를 나누는 선입니다. 리스트 아이템, 테이블 row, 설정 메뉴 항목처럼 한 화면에 여러 번 등장하는 구분에 사용됩니다. (subtle) */
 export declare const neutralSubtle = "var(--seed-color-stroke-neutral-subtle)";
-/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak) */
+/** 요소의 외곽을 그려 형태를 만드는 선입니다. 카드, 인풋 필드, 아웃라인 버튼처럼 선 자체가 요소의 경계를 정의할 때 사용됩니다. (weak) */
 export declare const neutralWeak = "var(--seed-color-stroke-neutral-weak)";
 /** 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid) */
 export declare const positiveSolid = "var(--seed-color-stroke-positive-solid)";

package/vars/component/accordion-item.d.ts

@@ -123,7 +123,7 @@ export declare const vars: {
   "variantSeparated": {
     "enabled": {
       "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
         "strokeWidth": "1px",
         "cornerRadius": "var(--seed-radius-r3)"
       }

package/vars/component/accordion-item.mjs

@@ -117,7 +117,7 @@ export const vars = {
   "variantSeparated": {
     "enabled": {
       "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
         "strokeWidth": "1px",
         "cornerRadius": "var(--seed-radius-r3)"
       }

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

@@ -3,9 +3,7 @@ export declare const vars: {
     "enabled": {
       "root": {
         "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)",
-        "scaleDuration": "var(--seed-duration-pressed-scale)",
-        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)"
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
       },
       "label": {
         "fontWeight": "var(--seed-font-weight-bold)"
@@ -444,11 +442,6 @@ export declare const vars: {
         "size": "14px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s95)"
-      }
     }
   },
   /**
@@ -506,11 +499,6 @@ export declare const vars: {
         "size": "14px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s97)"
-      }
     }
   },
   /**
@@ -568,11 +556,6 @@ export declare const vars: {
         "size": "16px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s97)"
-      }
     }
   },
   /**
@@ -630,11 +613,6 @@ export declare const vars: {
         "size": "18px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s98)"
-      }
     }
   },
   /**

package/vars/component/action-button.mjs

@@ -3,9 +3,7 @@ export const vars = {
     "enabled": {
       "root": {
         "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)",
-        "scaleDuration": "var(--seed-duration-pressed-scale)",
-        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)"
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
       },
       "label": {
         "fontWeight": "var(--seed-font-weight-bold)"
@@ -378,11 +376,6 @@ export const vars = {
         "size": "14px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s95)"
-      }
     }
   },
   "sizeXsmallLayoutWithText": {
@@ -426,11 +419,6 @@ export const vars = {
         "size": "14px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s97)"
-      }
     }
   },
   "sizeSmallLayoutWithText": {
@@ -474,11 +462,6 @@ export const vars = {
         "size": "16px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s97)"
-      }
     }
   },
   "sizeMediumLayoutWithText": {
@@ -522,11 +505,6 @@ export const vars = {
         "size": "18px",
         "thickness": "2px"
       }
-    },
-    "pressed": {
-      "root": {
-        "scale": "var(--seed-scale-s98)"
-      }
     }
   },
   "sizeLargeLayoutWithText": {

package/vars/component/bottom-sheet.d.ts

@@ -12,7 +12,7 @@ export declare const vars: {
       },
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
-        "maxWidth": "640px",
+        "maxWidth": "480px",
         "topCornerRadius": "var(--seed-radius-r6)",
         "enterDuration": "var(--seed-duration-d6)",
         "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",

package/vars/component/bottom-sheet.mjs

@@ -12,7 +12,7 @@ export const vars = {
       },
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
-        "maxWidth": "640px",
+        "maxWidth": "480px",
         "topCornerRadius": "var(--seed-radius-r6)",
         "enterDuration": "var(--seed-duration-d6)",
         "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",

package/vars/component/callout-close-button.d.ts

@@ -0,0 +1,81 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r2)",
+        "size": "var(--seed-dimension-x10)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  /**
+   * 일반적인 정보를 전달합니다.
+   */
+  "toneNeutral": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  /**
+   * 유용한 정보를 제공합니다.
+   */
+  "toneInformative": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      }
+    }
+  },
+  /**
+   * 긍정적인 상태를 나타냅니다.
+   */
+  "tonePositive": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      }
+    }
+  },
+  /**
+   * 주의가 필요한 상태를 나타냅니다.
+   */
+  "toneWarning": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      }
+    }
+  },
+  /**
+   * 중요한 문제를 나타냅니다.
+   */
+  "toneCritical": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      }
+    }
+  },
+  /**
+   * AI 기능을 나타냅니다.
+   */
+  "toneMagic": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

package/vars/component/callout-close-button.mjs

@@ -0,0 +1,63 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r2)",
+        "size": "var(--seed-dimension-x10)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  "toneNeutral": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  "toneInformative": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      }
+    }
+  },
+  "tonePositive": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      }
+    }
+  },
+  "toneWarning": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      }
+    }
+  },
+  "toneCritical": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      }
+    }
+  },
+  "toneMagic": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

package/vars/component/callout.d.ts

@@ -29,8 +29,7 @@ export declare const vars: {
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "suffixIcon": {
-        "size": "var(--seed-dimension-x4)",
-        "targetSize": "var(--seed-dimension-x10)"
+        "size": "var(--seed-dimension-x4)"
       }
     }
   },

package/vars/component/callout.mjs

@@ -27,8 +27,7 @@ export const vars = {
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "suffixIcon": {
-        "size": "var(--seed-dimension-x4)",
-        "targetSize": "var(--seed-dimension-x10)"
+        "size": "var(--seed-dimension-x4)"
       }
     }
   },

package/vars/component/checkbox.d.ts

@@ -4,6 +4,7 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-fg-neutral)"
       },
+      /** root 전체가 누르는 영역이며, pressed 피드백은 Checkmark의 축소로 표현됩니다. */
       "root": {
         "gap": "var(--seed-dimension-x2)"
       }
@@ -30,6 +31,7 @@ export declare const vars: {
   },
   "sizeMedium": {
     "enabled": {
+      /** root 전체가 누르는 영역이며, pressed 피드백은 Checkmark의 축소로 표현됩니다. */
       "root": {
         "minHeight": "var(--seed-dimension-x8)"
       },
@@ -41,6 +43,7 @@ export declare const vars: {
   },
   "sizeLarge": {
     "enabled": {
+      /** root 전체가 누르는 영역이며, pressed 피드백은 Checkmark의 축소로 표현됩니다. */
       "root": {
         "minHeight": "var(--seed-dimension-x9)"
       },

package/vars/component/help-bubble.d.ts

@@ -7,6 +7,7 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x3)",
         "paddingY": "var(--seed-dimension-x2_5)",
         "gap": "var(--seed-dimension-x1)",
+        "maxWidth": "280px",
         "enterScale": "0.9",
         "enterOpacity": "0",
         "enterDuration": "var(--seed-duration-d4)",
@@ -14,7 +15,9 @@ export declare const vars: {
         "exitScale": "1",
         "exitOpacity": "0",
         "exitDuration": "var(--seed-duration-d4)",
-        "exitTimingFunction": "var(--seed-timing-function-easing)"
+        "exitTimingFunction": "var(--seed-timing-function-easing)",
+        /** 말풍선과 뷰포트 경계 사이의 최소 간격을 정의합니다. */
+        "overflowPadding": "var(--seed-dimension-x4)"
       },
       "arrow": {
         "color": "var(--seed-color-bg-neutral-inverted)",

package/vars/component/help-bubble.mjs

@@ -7,6 +7,7 @@ export const vars = {
         "paddingX": "var(--seed-dimension-x3)",
         "paddingY": "var(--seed-dimension-x2_5)",
         "gap": "var(--seed-dimension-x1)",
+        "maxWidth": "280px",
         "enterScale": "0.9",
         "enterOpacity": "0",
         "enterDuration": "var(--seed-duration-d4)",
@@ -14,7 +15,8 @@ export const vars = {
         "exitScale": "1",
         "exitOpacity": "0",
         "exitDuration": "var(--seed-duration-d4)",
-        "exitTimingFunction": "var(--seed-timing-function-easing)"
+        "exitTimingFunction": "var(--seed-timing-function-easing)",
+        "overflowPadding": "var(--seed-dimension-x4)"
       },
       "arrow": {
         "color": "var(--seed-color-bg-neutral-inverted)",

package/vars/component/index.d.ts

@@ -18,6 +18,7 @@ export { vars as badge } from "./badge";
 export { vars as bottomSheetCloseButton } from "./bottom-sheet-close-button";
 export { vars as bottomSheetHandle } from "./bottom-sheet-handle";
 export { vars as bottomSheet } from "./bottom-sheet";
+export { vars as calloutCloseButton } from "./callout-close-button";
 export { vars as callout } from "./callout";
 export { vars as checkboxGroup } from "./checkbox-group";
 export { vars as checkbox } from "./checkbox";
@@ -58,7 +59,10 @@ export { vars as menuSheetItem } from "./menu-sheet-item";
 export { vars as menuSheet } from "./menu-sheet";
 export { vars as menu } from "./menu";
 export { vars as notificationBadge } from "./notification-badge";
+export { vars as pageBannerCloseButton } from "./page-banner-close-button";
 export { vars as pageBanner } from "./page-banner";
+export { vars as paginationButton } from "./pagination-button";
+export { vars as paginationPageItem } from "./pagination-page-item";
 export { vars as progressCircle } from "./progress-circle";
 export { vars as quantityPickerButton } from "./quantity-picker-button";
 export { vars as quantityPicker } from "./quantity-picker";
@@ -96,4 +100,5 @@ 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";
+export { vars as typography } from "./typography";
+export { vars as wheelPicker } from "./wheel-picker";

package/vars/component/index.mjs

@@ -18,6 +18,7 @@ export { vars as badge } from "./badge.mjs";
 export { vars as bottomSheetCloseButton } from "./bottom-sheet-close-button.mjs";
 export { vars as bottomSheetHandle } from "./bottom-sheet-handle.mjs";
 export { vars as bottomSheet } from "./bottom-sheet.mjs";
+export { vars as calloutCloseButton } from "./callout-close-button.mjs";
 export { vars as callout } from "./callout.mjs";
 export { vars as checkboxGroup } from "./checkbox-group.mjs";
 export { vars as checkbox } from "./checkbox.mjs";
@@ -58,7 +59,10 @@ export { vars as menuSheetItem } from "./menu-sheet-item.mjs";
 export { vars as menuSheet } from "./menu-sheet.mjs";
 export { vars as menu } from "./menu.mjs";
 export { vars as notificationBadge } from "./notification-badge.mjs";
+export { vars as pageBannerCloseButton } from "./page-banner-close-button.mjs";
 export { vars as pageBanner } from "./page-banner.mjs";
+export { vars as paginationButton } from "./pagination-button.mjs";
+export { vars as paginationPageItem } from "./pagination-page-item.mjs";
 export { vars as progressCircle } from "./progress-circle.mjs";
 export { vars as quantityPickerButton } from "./quantity-picker-button.mjs";
 export { vars as quantityPicker } from "./quantity-picker.mjs";
@@ -96,4 +100,5 @@ 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";
+export { vars as typography } from "./typography.mjs";
+export { vars as wheelPicker } from "./wheel-picker.mjs";

package/vars/component/list-item.d.ts

@@ -10,9 +10,7 @@ export declare const vars: {
         "marginDuration": "var(--seed-duration-d3)",
         "marginTimingFunction": "var(--seed-timing-function-easing)",
         "borderRadiusDuration": "var(--seed-duration-d3)",
-        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)",
-        "contentScaleDuration": "var(--seed-duration-pressed-scale)",
-        "contentScaleTimingFunction": "var(--seed-timing-function-pressed-scale)"
+        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
       },
       "body": {
         "gap": "var(--seed-dimension-x0_5)",
@@ -56,9 +54,7 @@ export declare const vars: {
         "color": "var(--seed-color-bg-transparent-pressed)",
         /** pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다. 이 값은 OS 동작 줄이기 설정의 영향을 받지 않습니다. */
         "marginX": "var(--seed-dimension-x1_5)",
-        "cornerRadius": "var(--seed-dimension-x2_5)",
-        /** pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다. */
-        "contentScale": "var(--seed-scale-s97)"
+        "cornerRadius": "var(--seed-dimension-x2_5)"
       }
     },
     "highlighted": {

package/vars/component/list-item.mjs

@@ -10,9 +10,7 @@ export const vars = {
         "marginDuration": "var(--seed-duration-d3)",
         "marginTimingFunction": "var(--seed-timing-function-easing)",
         "borderRadiusDuration": "var(--seed-duration-d3)",
-        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)",
-        "contentScaleDuration": "var(--seed-duration-pressed-scale)",
-        "contentScaleTimingFunction": "var(--seed-timing-function-pressed-scale)"
+        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
       },
       "body": {
         "gap": "var(--seed-dimension-x0_5)",
@@ -55,8 +53,7 @@ export const vars = {
       "root": {
         "color": "var(--seed-color-bg-transparent-pressed)",
         "marginX": "var(--seed-dimension-x1_5)",
-        "cornerRadius": "var(--seed-dimension-x2_5)",
-        "contentScale": "var(--seed-scale-s97)"
+        "cornerRadius": "var(--seed-dimension-x2_5)"
       }
     },
     "highlighted": {