# @crometrics/lp-design-system 中文文档
规范地址：https://npmcn.com/package/%40crometrics/lp-design-system/
版本：0\.10\.1
npm 元数据更新时间：2026-11-10T19:50:30.819Z
中文译文更新时间：2026-11-14T13:34:11.112Z
软件包许可：UNLICENSED
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40crometrics/lp-design-system
原文对照：https://npmcn.com/package/%40crometrics/lp-design-system/?lang=original
源码仓库：https://github.com/CROmetrics/packages
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：791 kB，363 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：3 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2026-10-22T17:16:54.057Z
- 最新版本发布：2026-11-10T19:50:30.630Z
- 近 30 天下载量：2035（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 13 个）
## 中文简介
暂无中文简介
## 安装
```sh
npm install @crometrics/lp-design-system
```
也可以使用：`pnpm add @crometrics/lp-design-system`、`yarn add @crometrics/lp-design-system`、`bun add @crometrics/lp-design-system`
## README
# @ crometics/ lp- 设计系统
React 18/19 组件库用于登陆页面. 船舶未捆绑的无害环境管理(每个单元一个) 和独立的样式表; 消费者仅通过 `--lp-*` CSS 变量和不需要 尾风自设.
## 安装
该套件公开发布至npm:
```sh
pnpm add @crometrics/lp-design-system
```
通过0.5.0的放出也去了GitHub套件;后期的放出只有npm. 另一个 `@crometrics` 软件包仍然被发布到 GitHub 软件包。 狦 `.npmrc` (项目或 `~/.npmrc`) 绘制那里的范围—— `@crometrics:registry=https://npm.pkg.github.com/` ——这种绘图适用于每一个 `@crometrics` 软件包,因此上面的命令会针对 GitHub 软件包解析,而永远不会看到 npm发布. 如果您不需要其他地图, 要么删除映射 `@crometrics` 软件包,或指针 以 pnpm 为单位的 npm 软件包 `npmjs:` 登记册前缀(pnpm 11.1+):
```sh
pnpm add "@crometrics/lp-design-system@npmjs:^0.5.0"
```
用于保存 `"@crometrics/lp-design-system": "npmjs:^0.5.0"` 改为 `package.json`更新 从 npm 而从其他 `@crometrics` gitHub 软件包中仍然有解析。 无 而Yarn没有每个包装的注册系统.
`react` 财务报告和审定财务报表 `react-dom` `^18.0.0 || ^19.0.0` 属于对等依赖,必须安装于 消费者。 每一个故事测试都运行在 Resact 18.3.1(HubSpot CMS React pins)和 反应19.
## 使用量
在应用根导入样式表, 然后在任何地方使用组件 :
```tsx
// app entry (e.g. src/main.tsx, or app/layout.tsx in Next.js)
import '@crometrics/lp-design-system/styles.css';
```
从自己的入口——kebab- case 组件名称导入每个组件:
```tsx
import { Button } from '@crometrics/lp-design-system/button';
import { PromoBanner } from '@crometrics/lp-design-system/promo-banner';
```
每个组件入口只装入每个工具中的组件模块: 生产捆绑、dev服务器和测试跑道 从软件包导入 根数( e)`import { Button } from '@crometrics/lp-design-system'`(b) 工程和 生产过程中的树摇摆正在建立,但dev服务器和测试跑取器每加载 组件通过它.
```tsx
import { Button } from '@crometrics/lp-design-system/button';
export default function Page() {
return (
<>
}>
With icon
}
iconPosition="trailing"
>
On a hero image
} round />
);
}
```
### 服务器渲染和水分
每个组件的服务器发送器( 验证为 `renderToString` (原始内容存档于2018-11-19). React 18 and 19. 只有两个人需要客户水合——在HubSpot CMS React中,使其成为岛屿:
| 构成部分 | 为什么它会水合物 |
| --- | --- |
| `DonationForm` (这样) `DonationHero` 除非你通过 `formSlot`(中文(简体) ) | 频率/挂载状态 |
| `Tout` | 滚动驱动的旋转木马指标`mobileLayout="carousel"`(中文(简体) ) |
其他一切——包括: `Header`, (中文(简体) ), `TrustSignalsMetrics`, (中文(简体) ), `ThirtyNinety`, (中文(简体) ), `PromoBanner`, (中文(简体) ), `Accordion` (Base UI将自己的原始水合物)和 `FooterMega` —— 说 无组件 JavaScript。 与 `formSlot`, (中文(简体) ), `DonationHero` 无需水合 它的自身 超越了任何时间档的供应商 嵌入带来的.
部件也是RSC安全: `Tout` 财务报告和审定财务报表 `DonationForm` 标记 `'use client'`,所以在 Next.js App路由器和 没有将组件 JavaScript 传送到浏览器 。 两者都可以直接从服务器中渲染 组件 - 不需要折叠文件。 无 RSC 框架( Vite SPAs, Astro, plain) 反应)忽略指令.
从服务器组件传递的道具必须是可序列的: 事件处理器, 如 `Input`是因为 `onChange` 或者说 `EmailSignupForm`是因为 `onSubmit` 只能从一个 客户端组件.
## 他们
`--lp-*` 自定义属性是整个公共造型 API。 默认声明于 `:root` 内 `styles.css`; 覆盖您 CSS 中的任意一个, 并装入 库样式表 :
```css
:root {
--lp-color-primary: #16a34a;
}
```
默认镜像 Figma “ 页面设计系统” 库 .
| 变量 | 默认 | 用于 |
| --- | --- | --- |
| `--lp-color-primary` | `#185dff` | 主按钮填充, 第三级/ 透明边框 |
| `--lp-color-primary-hover` | `#0037b8` | 主按钮徘徊填充 |
| `--lp-color-text-on-primary` | `var(--lp-color-text-inverse)` | 主按钮标签( 如橙色 CTA 上的暗文本) |
| `--lp-color-secondary` | `#141414` | 次要按钮填充 |
| `--lp-color-secondary-hover` | `#666666` | 次要按钮悬空 |
| `--lp-color-secondary-active` | `#212121` | 按下二级按钮填充 |
| `--lp-color-surface` | `#ffffff` | 浅表面( 外部按钮填充) |
| `--lp-color-text` | `#141414` | 轻表面文字 |
| `--lp-color-text-inverse` | `#ffffff` | 暗/ 品牌表面的文字 |
| `--lp-color-text-inverse-muted` | `var(--lp-color-text-inverse)` | 暗面的副文本 |
| `--lp-color-text-inverse-brand` | `var(--lp-color-text-inverse)` | 黑色表面的有色文字 |
| `--lp-color-text-inverse-accent` | `var(--lp-color-text-inverse)` | 深色表面的正文/链接 |
| `--lp-color-text-muted` | `#666666` | 禁用文本 |
| `--lp-color-border-muted` | `#b4b4b4` | 已禁用边框 |
| `--lp-color-disabled` | `#e5e5e5` | 禁用补全 |
| `--lp-color-focus` | `#dc0173` | 重点可见大纲 |
| `--lp-font-sans` | `system-ui, -apple-system, sans-serif` | 文本正文 |
| `--lp-font-button` | `"Montserrat", var(--lp-font-sans)` | 按钮标签( 自己装入蒙特塞拉特) |
| `--lp-font-button-weight` | `500` | 按键标签重量 |
| `--lp-font-cta-weight` | `500` | 文本链接 CTA 重量(例如卡 CTAs) |
| `--lp-font-badge-weight` | `600` | `Badge variant="tag"` 标签重量 |
| `--lp-radius` | `0.375rem` | 角半径 |
| `--lp-color-surface-secondary` | `#f6f6f6` | 区域背景( 如交替带色) |
| `--lp-color-surface-tertiary` | `#e5e5e5` | 子拖放区域背景 |
| `--lp-color-surface-inverse` | `#141414` | 黑暗区域背景 |
| `--lp-color-surface-inverse-secondary` | `var(--lp-color-surface-inverse)` | 第二个暗面(例如暗带上一张牌) |
| `--lp-color-surface-tint` | `var(--lp-color-surface-secondary)` | 有锡段带 |
| `--lp-color-surface-brand-secondary` | `var(--lp-color-surface-tertiary)` | 二级品牌色带/卡片 |
| `--lp-color-surface-neutral` | `var(--lp-color-surface-secondary)` | 温暖/中性段幅 |
| `--lp-color-surface-card` | `transparent` | 纸牌表面(例如:. `ContentCard`(中文(简体) ) |
| `--lp-color-surface-card-hover` | `var(--lp-color-surface-card)` | 悬浮的卡片表面 |
| `--lp-color-text-on-card` 编号 : `-hover` | `var(--lp-color-text)` 编号 : `var(--lp-color-text-on-card)` | 满纸牌上的文字和悬浮的文字 |
| `--lp-color-surface-inverse-brand-secondary` | `var(--lp-color-surface-brand-secondary)` | `Badge variant="tag"` 填满 |
| `--lp-color-donation-icon` | `currentColor` | 捐款 表格的每月心脏图标 |
| `--lp-color-surface-brand` | `#185dff` | 装满了徽章,有名色的表面 |
| `--lp-color-text-brand` | `#185dff` | 品牌彩色文本和链接(如卡 CTAs) |
| `--lp-color-border` | `#212121` | 较强的边界(vs. `-border-muted`(中文(简体) ) |
| `--lp-color-border-inverse` | `var(--lp-color-border-muted)` | 暗表面的边框/潜水器 |
| `--lp-color-accent` | `#dc0173` | 口音颜色 |
| `--lp-color-donation` | `#dc0173` | 捐款式按钮填充(重用口音) |
| `--lp-font-body` | `"Montserrat", var(--lp-font-sans)` | 文字、徽章、卡片CTA |
| `--lp-font-heading` | `"Playfair Display", serif` | 区/卡标题( 自己装入字体) |
| `--lp-font-heading-weight` | 未设置( 标题保留浏览器/ 您的默认重量) | 重量 `h1`– 说吧 –`h5`/ CMS 标题样式 |
| `--lp-text-{h1-cms,h2-cms,h1,h2,h3,h4,h5}-tracking` | 未设置( 继承) | 每个标题级别(例如:. `-1px`(中文(简体) ) |
| `--lp-text-h1-cms-size` 编号 : `-line-height` | `3rem` 编号 : `3rem` (48px/48px), (中文(简体) ), `2.25rem`编号 :`2.5rem` 移动 | 最大的 CMS 页面标题 |
| `--lp-text-h2-cms-size` 编号 : `-line-height` | `2.25rem`编号 :`2.5rem` (36px/40px), (中文(简体) ), `1.875rem`编号 :`2.25rem` 移动 | 第二大内容管理系统标题 |
| `--lp-text-h1-size` 编号 : `-line-height` | `2.25rem`编号 :`2.5rem` (36px/40px), (中文(简体) ), `1.875rem`编号 :`2.25rem` 移动 | H1级 |
| `--lp-text-h2-size` 编号 : `-line-height` | `1.5rem`编号 :`2rem` (24px/32px), (中文(简体) ), `1.25rem`编号 :`1.75rem` 移动 | H2 数据 |
| `--lp-text-h3-size` 编号 : `-line-height` | `1.25rem`编号 :`1.75rem` (20px/28px), (中文(简体) ), `1.125rem`编号 :`1.75rem` 移动 | H3级 |
| `--lp-text-h4-size` 编号 : `-line-height` | `1.125rem`编号 :`1.75rem` (18px/28px), (中文(简体) ), `1rem`编号 :`1.5rem` 移动 | H4级 |
| `--lp-text-h5-size` 编号 : `-line-height` | `1rem`编号 :`1.5rem` (16px/24px), (中文(简体) ), `0.875rem`编号 :`1.25rem` 移动 | 高级 |
| `--lp-text-body-lg-size` 编号 : `-line-height` | `1.125rem`编号 :`1.75rem` (18px/28px,无移动变体) | 大型复制件 |
| `--lp-text-body-size` 编号 : `-line-height` | `1rem`编号 :`1.5rem` (16px/24px,无移动变体) | 副本 |
| `--lp-text-body-sm-size` 编号 : `-line-height` | `0.875rem`编号 :`1.25rem` (14px/20px,无移动变体) | 体型小一点 |
| `--lp-text-eyebrow-size` 编号 : `-line-height` | `0.875rem`编号 :`1.25rem` (14px/20px,无移动变体) | 眉毛标签 |
| `--lp-text-cta-size` 编号 : `-line-height` | `0.875rem`编号 :`1.25rem` (14px/20px,无移动变体) | 文本链接 CTAs( 如卡 CTAs) |
| `--lp-text-button-md-size` 编号 : `-line-height` | `0.875rem`编号 :`1.25rem` (14px/20px) (英语) | 中键标签 |
| `--lp-text-button-lg-size` 编号 : `-line-height` | `1rem`编号 :`1.5rem` (16px/24px) (英语) | 大按钮标签 |
| `--lp-text-footer-size` 编号 : `-line-height` | 天体- sm 值 | 脚印Mega版权/法律文本 |
| `--lp-radius-card` | `0.375rem` | 卡片角半径 |
| `--lp-radius-input` | `0.375rem` | 输入/文本区域角半径(与半径卡值相同,是未来重播的独立标志) |
| `--lp-radius-image` | `0px` | 图像角半径( 按设计显示) |
| `--lp-space-section` | `6rem` 台式计算机 / `4rem` 移动 | 区域垂直粘贴 |
| `--lp-space-gutter` | `1.5rem`, (中文(简体) ), `7.5rem` 1728px+(宽) | 区域水平粘贴 |
| `--lp-space-stack` | `2rem` | Tout 桌面网格中的卡片间隙( 通过) `--lp-space-cards`(中文(简体) ) |
| `--lp-space-cards` | `var(--lp-space-stack)` | 牌行中的牌间间隙( Tout) |
| `--lp-container` | `93rem` (1488px) (中文(简体) ) | 最大内容宽度( 不包括沟道), 居中 |
| `--lp-shadow` | `0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06)` | 默认高地 |
| `--lp-shadow-lg` | `0 8px 10px -3px rgb(0 0 0 / 0.2), 0 4px 5px -2px rgb(0 0 0 / 0.15)` | 上升高地(如盘旋) |
| `--lp-shadow-form` | `var(--lp-shadow-lg)` | 捐款格式卡(和捐款) 英雄们 `formSlot` 纸牌) |
### 断点
布局遵循设计的三个页面框架: **移动 < 1024px**, (中文(简体) ), **桌面 1024–1727px (英语)**, (中文(简体) ), **宽度为 1728px**。反应符号默认值在这些宽度下切换,以及 主题覆盖同一媒体查询中响应的符号 :
```css
:root {
--lp-text-h1-cms-size: 2.5rem;
} /* mobile + desktop */
@media (min-width: 1728px) {
:root {
--lp-text-h1-cms-size: 4rem;
} /* wide */
}
```
在0.5.0之前,宽层开始于1280px.
样式表不会重新显示您的页面 。 它确实在自己的组件内重新设置: 组件根带 a `data-lp` 属性,并重置零特性(Tailwind's 飞行前,范围扩大到 `[data-lp]` 子树)清除浏览器默认存在, 如标题 和段落边距、链接颜色和下划线以及本地按钮边框。 重置坐着 输入 `lp-base` 级联层和工具类 `lp`。任何没有层次的 CSS 在您的 页面的分数都高于两者,所以全球规则就像 `h2 { margin-bottom: 1rem }` 您的主题仍然 到达我们的标题。 这些规则的范围,不包括 `[data-lp]` 如果他们干涉。 类 除这些变量外,其他名称是执行细节,在任何发布中都可能有所改变.
## 构成部分
| 构成部分 | 道具 |
| --- | --- |
| `Button` | `variant?: 'primary' | 'secondary' | 'tertiary' | 'transparent'`, (中文(简体) ), `size?: 'md' | 'lg'`, (中文(简体) ), `icon?: ReactNode` (单位:千美元) `![]()
` 或内置SVG), `iconPosition?: 'leading' | 'trailing'`, (中文(简体) ), `round?: boolean`, (中文(简体) ), `href?: string` (以 `` 改为 `