@seed-design/lynx-css 0.0.0-alpha-20260622094810

package/vars/component/extended-action-sheet.mjs

@@ -0,0 +1,55 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "backdrop": {
+        "color": "var(--seed-color-bg-overlay)",
+        "enterDuration": "var(--seed-duration-d2)",
+        "enterTimingFunction": "var(--seed-timing-function-enter)",
+        "enterOpacity": "0",
+        "exitDuration": "var(--seed-duration-d2)",
+        "exitTimingFunction": "var(--seed-timing-function-exit)",
+        "exitOpacity": "0"
+      },
+      "content": {
+        "color": "var(--seed-color-bg-layer-floating)",
+        "maxWidth": "480px",
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
+        "paddingY": "var(--seed-dimension-x4)",
+        "topCornerRadius": "var(--seed-radius-r5)",
+        "enterDuration": "var(--seed-duration-d6)",
+        "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
+        "exitDuration": "var(--seed-duration-d4)",
+        "exitTimingFunction": "var(--seed-timing-function-exit)"
+      },
+      "header": {
+        "gap": "var(--seed-dimension-x1)",
+        "paddingBottom": "var(--seed-dimension-x4)"
+      },
+      "title": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)",
+        "fontWeight": "var(--seed-font-weight-bold)",
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "color": "var(--seed-color-fg-neutral-muted)"
+      },
+      "list": {
+        "gap": "var(--seed-dimension-x2_5)"
+      },
+      "group": {
+        "cornerRadius": "var(--seed-radius-r4)"
+      },
+      "divider": {
+        "strokeBottomWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
+      },
+      "footer": {
+        "paddingTop": "var(--seed-dimension-x2_5)"
+      }
+    }
+  }
+}

package/vars/component/extended-fab.d.ts

@@ -0,0 +1,88 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-radius-full)",
+        "shadow": "0px 2px 6px 0px #00000026"
+      }
+    }
+  },
+  /**
+   * 기본 FAB 스타일입니다.
+   */
+  "variantNeutralSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    }
+  },
+  /**
+   * 플로팅 레이어 위에 사용하는 스타일입니다.
+   */
+  "variantLayerFloating": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating-pressed)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "minHeight": "40px",
+        "gap": "var(--seed-dimension-x1)",
+        "paddingX": "var(--seed-dimension-x3_5)",
+        "paddingY": "var(--seed-dimension-x2_5)"
+      },
+      "prefixIcon": {
+        "size": "16px"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "minHeight": "48px",
+        "gap": "var(--seed-dimension-x1)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x3)"
+      },
+      "prefixIcon": {
+        "size": "16px"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  }
+}

package/vars/component/extended-fab.mjs

@@ -0,0 +1,82 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-radius-full)",
+        "shadow": "0px 2px 6px 0px #00000026"
+      }
+    }
+  },
+  "variantNeutralSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    }
+  },
+  "variantLayerFloating": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating-pressed)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "minHeight": "40px",
+        "gap": "var(--seed-dimension-x1)",
+        "paddingX": "var(--seed-dimension-x3_5)",
+        "paddingY": "var(--seed-dimension-x2_5)"
+      },
+      "prefixIcon": {
+        "size": "16px"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "minHeight": "48px",
+        "gap": "var(--seed-dimension-x1)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x3)"
+      },
+      "prefixIcon": {
+        "size": "16px"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  }
+}

package/vars/component/fab.d.ts

@@ -0,0 +1,21 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "size": "44px",
+        "shadow": "0px 2px 6px 0px #00000026"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)",
+        "size": "22px"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating-pressed)"
+      }
+    }
+  }
+}

package/vars/component/fab.mjs

@@ -0,0 +1,21 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "size": "44px",
+        "shadow": "0px 2px 6px 0px #00000026"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)",
+        "size": "22px"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-floating-pressed)"
+      }
+    }
+  }
+}

package/vars/component/field-label.d.ts

@@ -0,0 +1,25 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      }
+    }
+  },
+  "weightMedium": {
+    "enabled": {
+      "root": {
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
+  "weightBold": {
+    "enabled": {
+      "root": {
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  }
+}

package/vars/component/field-label.mjs

@@ -0,0 +1,25 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      }
+    }
+  },
+  "weightMedium": {
+    "enabled": {
+      "root": {
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
+  "weightBold": {
+    "enabled": {
+      "root": {
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  }
+}

package/vars/component/field.d.ts

@@ -0,0 +1,78 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x2)"
+      },
+      "header": {
+        "paddingX": "var(--seed-dimension-x0_5)",
+        "gap": "var(--seed-dimension-x2_5)"
+      },
+      /** 필수 입력 필드임을 나타내는 아이콘입니다. indicatorText 및 Field Label과의 조화를 위해 폰트 스케일링에 반응합니다. */
+      "indicatorIcon": {
+        "color": "var(--seed-color-fg-critical)",
+        "size": "0.375rem",
+        "paddingTop": "0.25rem",
+        "paddingLeft": "0.125rem"
+      },
+      "indicatorText": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontSize": "var(--seed-font-size-t4)",
+        /** Field Label과의 조화를 위해 Field Label의 lineHeight와 동일한 값을 갖습니다. */
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "paddingLeft": "0.25rem"
+      },
+      "footer": {
+        "paddingX": "var(--seed-dimension-x0_5)",
+        "gap": "var(--seed-dimension-x2)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t4)",
+        /** Field Label과의 조화를 위해 Field Label의 lineHeight와 동일한 값을 갖습니다. */
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "descriptionIcon": {
+        "paddingRight": "var(--seed-dimension-x1_5)",
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "size": "var(--seed-dimension-x4)"
+      },
+      "errorMessage": {
+        "color": "var(--seed-color-fg-critical)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t4)",
+        /** Field Label과의 조화를 위해 Field Label의 lineHeight와 동일한 값을 갖습니다. */
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "errorIcon": {
+        "paddingRight": "var(--seed-dimension-x1_5)",
+        "color": "var(--seed-color-fg-critical)",
+        "size": "var(--seed-dimension-x4)"
+      },
+      "characterCount": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t4)",
+        /** Field Label과의 조화를 위해 Field Label의 lineHeight와 동일한 값을 갖습니다. */
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "maxCharacterCount": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t4)",
+        /** Field Label과의 조화를 위해 Field Label의 lineHeight와 동일한 값을 갖습니다. */
+        "lineHeight": "var(--seed-line-height-t4)"
+      }
+    },
+    "invalid": {
+      "characterCount": {
+        "color": "var(--seed-color-fg-critical)"
+      },
+      "maxCharacterCount": {
+        "color": "var(--seed-color-fg-critical)"
+      }
+    }
+  }
+}

package/vars/component/field.mjs

@@ -0,0 +1,72 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x2)"
+      },
+      "header": {
+        "paddingX": "var(--seed-dimension-x0_5)",
+        "gap": "var(--seed-dimension-x2_5)"
+      },
+      "indicatorIcon": {
+        "color": "var(--seed-color-fg-critical)",
+        "size": "0.375rem",
+        "paddingTop": "0.25rem",
+        "paddingLeft": "0.125rem"
+      },
+      "indicatorText": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "paddingLeft": "0.25rem"
+      },
+      "footer": {
+        "paddingX": "var(--seed-dimension-x0_5)",
+        "gap": "var(--seed-dimension-x2)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "descriptionIcon": {
+        "paddingRight": "var(--seed-dimension-x1_5)",
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "size": "var(--seed-dimension-x4)"
+      },
+      "errorMessage": {
+        "color": "var(--seed-color-fg-critical)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "errorIcon": {
+        "paddingRight": "var(--seed-dimension-x1_5)",
+        "color": "var(--seed-color-fg-critical)",
+        "size": "var(--seed-dimension-x4)"
+      },
+      "characterCount": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "maxCharacterCount": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      }
+    },
+    "invalid": {
+      "characterCount": {
+        "color": "var(--seed-color-fg-critical)"
+      },
+      "maxCharacterCount": {
+        "color": "var(--seed-color-fg-critical)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "shadow": "var(--seed-shadow-s3)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "layoutDuration": "var(--seed-duration-d4)",
+        "layoutTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)",
+        "sizeDuration": "var(--seed-duration-d4)",
+        "sizeTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid-pressed)"
+      }
+    }
+  },
+  /**
+   * 라벨이 포함된 확장 형태로, 버튼의 역할을 명확히 전달합니다.
+   */
+  "extendedTrue": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x1)",
+        "paddingX": "var(--seed-dimension-x4_5)",
+        "paddingY": "var(--seed-dimension-x3)",
+        "minHeight": "48px"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x5)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  },
+  /**
+   * 아이콘만 표시되는 기본 형태입니다.
+   */
+  "extendedFalse": {
+    "enabled": {
+      "root": {
+        "size": "56px"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x6)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "shadow": "var(--seed-shadow-s3)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "layoutDuration": "var(--seed-duration-d4)",
+        "layoutTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)",
+        "sizeDuration": "var(--seed-duration-d4)",
+        "sizeTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-brand-solid-pressed)"
+      }
+    }
+  },
+  "extendedTrue": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x1)",
+        "paddingX": "var(--seed-dimension-x4_5)",
+        "paddingY": "var(--seed-dimension-x3)",
+        "minHeight": "48px"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x5)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      }
+    }
+  },
+  "extendedFalse": {
+    "enabled": {
+      "root": {
+        "size": "56px"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x6)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "paddingX": "var(--seed-dimension-x3)",
+        "paddingY": "var(--seed-dimension-x2_5)",
+        "gap": "var(--seed-dimension-x1)",
+        "enterScale": "0.9",
+        "enterOpacity": "0",
+        "enterDuration": "var(--seed-duration-d4)",
+        "enterTimingFunction": "var(--seed-timing-function-enter)",
+        "exitScale": "1",
+        "exitOpacity": "0",
+        "exitDuration": "var(--seed-duration-d4)",
+        "exitTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "arrow": {
+        "color": "var(--seed-color-bg-neutral-inverted)",
+        "width": "12px",
+        "height": "8px",
+        "cornerRadius": "2px",
+        /** arrow와 타겟 요소 사이의 거리를 정의합니다. */
+        "gutter": "4px",
+        /** arrow와 root의 경계 사이의 최소 간격을 정의합니다. */
+        "padding": "14px"
+      },
+      "body": {
+        "gap": "var(--seed-dimension-x0_5)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral-inverted)",
+        "fontSize": "var(--seed-font-size-t3)",
+        "fontWeight": "var(--seed-font-weight-bold)",
+        "lineHeight": "var(--seed-line-height-t3)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral-inverted)",
+        "fontSize": "var(--seed-font-size-t3)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "lineHeight": "var(--seed-line-height-t3)"
+      },
+      "closeButton": {
+        "color": "var(--seed-color-fg-neutral-inverted)",
+        "size": "var(--seed-dimension-x3_5)",
+        "targetSize": "38px",
+        "marginTop": "var(--seed-dimension-x0_5)"
+      }
+    }
+  }
+}