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

package/vars/component/attachment-input-item.mjs

@@ -0,0 +1,102 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "height": "80px",
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "strokeWidth": "1px",
+        "gap": "var(--seed-dimension-x2_5)"
+      },
+      "thumbnail": {
+        "color": "var(--seed-color-bg-neutral-weak)",
+        "size": "var(--seed-dimension-x12)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "thumbnailIcon": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "size": "var(--seed-dimension-x6)"
+      },
+      "name": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "size": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontSize": "var(--seed-font-size-t1)",
+        "lineHeight": "var(--seed-line-height-t1)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "removeButtonMask": {
+        "offset": "var(--seed-dimension-x1_5)",
+        "size": "var(--seed-dimension-x6)"
+      }
+    }
+  },
+  "typeFile": {
+    "enabled": {
+      "root": {
+        "width": "160px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        "paddingX": "var(--seed-dimension-x4)"
+      }
+    },
+    "readonly": {
+      "thumbnailIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "name": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "size": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "dragging": {
+      "thumbnailIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "name": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "size": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "typeImage": {
+    "enabled": {
+      "root": {
+        "width": "80px",
+        "strokeColor": "var(--seed-color-stroke-neutral-subtle)"
+      },
+      "backdrop": {
+        "color": "var(--seed-color-bg-overlay)"
+      },
+      "badge": {
+        "color": "var(--seed-color-bg-overlay)",
+        "height": "var(--seed-dimension-x6)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "paddingX": "var(--seed-dimension-x1)"
+      },
+      "badgeLabel": {
+        "color": "var(--seed-color-palette-static-white)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    },
+    "readonly": {
+      "root": {
+        "opacity": "0.5"
+      }
+    },
+    "dragging": {
+      "root": {
+        "opacity": "0.5"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-trigger.d.ts

@@ -0,0 +1,46 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "80px",
+        "gap": "var(--seed-dimension-x1)",
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x6)",
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "itemCount": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)"
+      },
+      "maxItemCount": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "itemCount": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "maxItemCount": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-trigger.mjs

@@ -0,0 +1,46 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "80px",
+        "gap": "var(--seed-dimension-x1)",
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x6)",
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "itemCount": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)"
+      },
+      "maxItemCount": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "itemCount": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "maxItemCount": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input.d.ts

@@ -0,0 +1,14 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      /** Attachment Input Dropzone과 Items를 감싸는 컨테이너입니다. */
+      "root": {
+        "gap": "var(--seed-dimension-x2)"
+      },
+      /** Attachment Input Trigger 및 Attachment Input Items를 감싸는 컨테이너입니다. */
+      "items": {
+        "gap": "var(--seed-dimension-x2)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input.mjs

@@ -0,0 +1,12 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x2)"
+      },
+      "items": {
+        "gap": "var(--seed-dimension-x2)"
+      }
+    }
+  }
+}

package/vars/component/avatar-stack.d.ts

@@ -0,0 +1,110 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "item": {
+        "cornerRadius": "var(--seed-radius-full)",
+        "strokeColor": "var(--seed-color-bg-layer-default)"
+      }
+    }
+  },
+  "size20": {
+    "enabled": {
+      "root": {
+        "gap": "-5px"
+      },
+      "item": {
+        "strokeWidth": "1px"
+      }
+    }
+  },
+  "size24": {
+    "enabled": {
+      "root": {
+        "gap": "-6px"
+      },
+      "item": {
+        "strokeWidth": "1px"
+      }
+    }
+  },
+  "size36": {
+    "enabled": {
+      "root": {
+        "gap": "-8px"
+      },
+      "item": {
+        "strokeWidth": "2px"
+      }
+    }
+  },
+  "size42": {
+    "enabled": {
+      "root": {
+        "gap": "-10px"
+      },
+      "item": {
+        "strokeWidth": "2px"
+      }
+    }
+  },
+  "size48": {
+    "enabled": {
+      "root": {
+        "gap": "-12px"
+      },
+      "item": {
+        "strokeWidth": "2px"
+      }
+    }
+  },
+  "size56": {
+    "enabled": {
+      "root": {
+        "gap": "-13px"
+      },
+      "item": {
+        "strokeWidth": "3px"
+      }
+    }
+  },
+  "size64": {
+    "enabled": {
+      "root": {
+        "gap": "-16px"
+      },
+      "item": {
+        "strokeWidth": "3px"
+      }
+    }
+  },
+  "size80": {
+    "enabled": {
+      "root": {
+        "gap": "-20px"
+      },
+      "item": {
+        "strokeWidth": "4px"
+      }
+    }
+  },
+  "size96": {
+    "enabled": {
+      "root": {
+        "gap": "-24px"
+      },
+      "item": {
+        "strokeWidth": "5px"
+      }
+    }
+  },
+  "size108": {
+    "enabled": {
+      "root": {
+        "gap": "-27px"
+      },
+      "item": {
+        "strokeWidth": "5px"
+      }
+    }
+  }
+}

package/vars/component/avatar-stack.mjs

@@ -0,0 +1,110 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "item": {
+        "cornerRadius": "var(--seed-radius-full)",
+        "strokeColor": "var(--seed-color-bg-layer-default)"
+      }
+    }
+  },
+  "size20": {
+    "enabled": {
+      "root": {
+        "gap": "-5px"
+      },
+      "item": {
+        "strokeWidth": "1px"
+      }
+    }
+  },
+  "size24": {
+    "enabled": {
+      "root": {
+        "gap": "-6px"
+      },
+      "item": {
+        "strokeWidth": "1px"
+      }
+    }
+  },
+  "size36": {
+    "enabled": {
+      "root": {
+        "gap": "-8px"
+      },
+      "item": {
+        "strokeWidth": "2px"
+      }
+    }
+  },
+  "size42": {
+    "enabled": {
+      "root": {
+        "gap": "-10px"
+      },
+      "item": {
+        "strokeWidth": "2px"
+      }
+    }
+  },
+  "size48": {
+    "enabled": {
+      "root": {
+        "gap": "-12px"
+      },
+      "item": {
+        "strokeWidth": "2px"
+      }
+    }
+  },
+  "size56": {
+    "enabled": {
+      "root": {
+        "gap": "-13px"
+      },
+      "item": {
+        "strokeWidth": "3px"
+      }
+    }
+  },
+  "size64": {
+    "enabled": {
+      "root": {
+        "gap": "-16px"
+      },
+      "item": {
+        "strokeWidth": "3px"
+      }
+    }
+  },
+  "size80": {
+    "enabled": {
+      "root": {
+        "gap": "-20px"
+      },
+      "item": {
+        "strokeWidth": "4px"
+      }
+    }
+  },
+  "size96": {
+    "enabled": {
+      "root": {
+        "gap": "-24px"
+      },
+      "item": {
+        "strokeWidth": "5px"
+      }
+    }
+  },
+  "size108": {
+    "enabled": {
+      "root": {
+        "gap": "-27px"
+      },
+      "item": {
+        "strokeWidth": "5px"
+      }
+    }
+  }
+}

package/vars/component/avatar.d.ts

@@ -0,0 +1,204 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-radius-full)",
+        "strokeColor": "var(--seed-color-stroke-neutral-subtle)"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 댓글을 남긴 사용자
+   */
+  "size20": {
+    "enabled": {
+      "root": {
+        "size": "20px",
+        "strokeWidth": "1px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 답글 프로필
+   */
+  "size24": {
+    "enabled": {
+      "root": {
+        "size": "24px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "14px",
+        "size": "12px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "15px",
+        "size": "10px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 댓글 프로필
+   */
+  "size36": {
+    "enabled": {
+      "root": {
+        "size": "36px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "20px",
+        "size": "18px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "22px",
+        "size": "14px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 게시글 상세 내 프로필
+   */
+  "size42": {
+    "enabled": {
+      "root": {
+        "size": "42px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "24px",
+        "size": "20px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "26px",
+        "size": "16px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 작은 리스트
+   */
+  "size48": {
+    "enabled": {
+      "root": {
+        "size": "48px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "28px",
+        "size": "22px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "30px",
+        "size": "18px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 큰 리스트
+   */
+  "size56": {
+    "enabled": {
+      "root": {
+        "size": "56px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "34px",
+        "size": "24px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "36px",
+        "size": "20px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 프로필 상세, 캐러셀
+   */
+  "size64": {
+    "enabled": {
+      "root": {
+        "size": "64px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "40px",
+        "size": "26px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "42px",
+        "size": "22px"
+      }
+    }
+  },
+  "size80": {
+    "enabled": {
+      "root": {
+        "size": "80px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "52px",
+        "size": "32px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "54px",
+        "size": "28px"
+      }
+    }
+  },
+  "size96": {
+    "enabled": {
+      "root": {
+        "size": "96px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "62px",
+        "size": "38px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "65px",
+        "size": "32px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 프로필 수정
+   */
+  "size108": {
+    "enabled": {
+      "root": {
+        "size": "108px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "70px",
+        "size": "44px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "74px",
+        "size": "36px"
+      }
+    }
+  }
+}