@cloudgrid-io/ui (英语)

CloudGrid设计系统:CSS自定义属性,一个Tailwind v4主题,自发托管 字体,和机器可读JSON的同值.

47 反应组件,基于 基础UI,仅通过符号样式 并且没有硬化的颜色.

安装

npm install @cloudgrid-io/ui

三个字型家族随同来,都是自办的,所以没有要求字体 CDN在你的关键路径.

使用组件

import { Button, Card, PricingTiers } from "@cloudgrid-io/ui"

组件被编译,每个组件一个模块,并附有类型申报. 20号 那需要它保持他们的 "use client" 指令,所以一个 React 服务器组件应用程序得到 准确的客户端 线源声明.

反应是一种 选项 端点依赖性: 单独取出样式表, 无所取用 组件树.

导入 CSS, 按此顺序

@import "tailwindcss";

@import "@cloudgrid-io/ui/fonts.css";
@import "@cloudgrid-io/ui/tokens.css";
@import "@cloudgrid-io/ui/console.css";   /* optional, see below */
@import "@cloudgrid-io/ui/theme.css";
@import "@cloudgrid-io/ui/shadcn.css";

命令很重要,而弄错了却悄悄的失败,而不是大声地失败了.

• theme.css 将拖风式公用设备映射到符上。 在此之前 tokens.css 已经运行那里 没有任何地图,所以每个工具都会一无所获,而页面则会变成无样式 而不是错误.
• console.css 是一个 产品预设,不是基地的一部分。 它重新宣告身体的脸 作为UI的面孔,曼罗佩, 并离开显示面 在坦克,作为云格丽德2026 Figma拥有它(# 371). CloudGrid Console是进口的,任何体型的产品都一样 类型是 UI 面相。 其他人都把线排出并保留默认值. 还有 将正文和标签大小设置为 14px ()--cg-body-sm, (中文(简体) ), --cg-label-size因此,每个 库中设置的正文文本匹配 Console 自己的 14px 文本; 标题保留 13px,没有预设的每个产品都保留了15px(#440). 这个 控制台的五个类型角色,作为标志: 体质 text-body-sm (14/1.46), (中文(简体) ), 体质粗体 text-body-sm font-bold, (中文(简体) ), 小型 text-caption (13起,1.46起), H4级 text-heading-lg font-medium (22/1.2), (中文(简体) ), 标题 font-display (谭克. 一页 选择一个角色,而不是大小。 它必须坐着 之后 tokens.css,这就是它是什么 重新声明: 在前导入 tokens.css 默认的面孔以同样的特殊性胜出, 寂然无相. 它相对于 theme.css 没关系. theme.css 实值 @theme inline因此,它释放的公用事业是活的 var() 解决的参考文献 任何标志结束的地方, 和Tailwindhoists主题输出 之上的平面 CSS反正; 以 Tailwind 4 测量 , console.css 之前或之后 theme.css 编译字节-同. 上面的顺序仍然是推荐的,因为它保持了预设的旁边 他们改变的标志.
• shadcn.css 一定要追寻什么 :root 你们自己 shadcn init 写着,因为 超过这些值。 早点放,股票灰色调色板获胜.

不使用控制台的脸: 跳过 console.css 线条。 不使用阴影: 跳过最后一行 。 不使用 Tailwind : tokens.css 一个人给你每一个 值作为自定义属性.

文献网站(星光)

文献网站不是Tailwind。 需要三张星光的样式表 customCss在此 顺序,并在一行中设置代码块:

import { cloudgridExpressiveCode } from "@cloudgrid-io/ui/expressive-code"

starlight({
  customCss: [
    "@cloudgrid-io/ui/fonts.css",
    "@cloudgrid-io/ui/tokens.css",
    "@cloudgrid-io/ui/docs.css",
  ],
  expressiveCode: cloudgridExpressiveCode,
})

docs.css 地图星光 --sl-* 在符号上添加一些目标规则。 这个 只亮: 它的样式没有暗范围, 所以站点必须强制光主题并放下 主题拾取器( 覆盖星光) ThemeProvider 财务报告和审定财务报表 ThemeSelect) (中文(简体) ). 它必须来之后 tokens.css,其中每个值都读取.

将尾风指向包裹

尾风 v4 忽略 node_modules 当它扫描课堂时, 所以公用设施只在内部使用 从未生成组件 :

@source "../node_modules/@cloudgrid-io/ui/dist";

调整路径到您的布局 . 悄悄跳过此失败 ——建设成功,建设成功 页面生成,组件则未显示.

表面翻转

打开 data-cg-surface 在一个容器上 里面的每个语义符号 地面值。 边界、背景、焦点圈和内部组件紧随其后,没有 dark: 变体和无第二个样式表.

<div data-cg-surface="panel" class="bg-panel text-ink">
  <!-- everything in here is now on brand purple -->
</div>

<div data-cg-surface="ink" class="bg-code text-ink">
  <!-- and everything in here is on near-black -->
</div>

三面:默认白页, panel 在品牌紫色,和 ink 在近黑.

文字为例外. 孩子们继承了他们的祖先已经决定的颜色 所以 设置的容器 data-cg-surface 还必须声明基于符号的文本颜色——即 什麽 text-ink 正在以上进行。 边界和背景自行翻转。 文本没有.

这里没有暗模式,这不能代替它。 黑暗的表面是一个 属性,绝不是页面级别的主题.

安装面板

每个CloudGrid安装面板都来自这个软件包,内容和设计. 没什么 已取来.

import { CloudGridInstall, INSTALL_PRESETS, installToolPreset } from "@cloudgrid-io/ui"

<CloudGridInstall />                                    // the whole panel
<CloudGridInstall preset={INSTALL_PRESETS.onboarding} onValueChange={recordTool} />
<CloudGridInstall preset={installToolPreset("cursor")} />

所出之道具无所取. 页面选择屏幕上的内容( A)tools, (中文(简体) ), methods, (中文(简体) ), defaultTool, (中文(简体) ), defaultMethod, (中文(简体) ), showFetchPrompt, (中文(简体) ), showFooter,或一个 preset和什么只 它可以知道(选定的工具和方法、标题级别、一个继续动作)。 工具值 是稳定的识别器,可安全记录: claude-code, (中文(简体) ), cursor, (中文(简体) ), codex, (中文(简体) ), antigravity, (中文(简体) ), gemini, (中文(简体) ), chatgpt, (中文(简体) ), claude-web。 。 。 .

CloudGridFetchPrompt 财务报告和审定财务报表 CloudGridInstallFooter 自己来 没有反应,就拿 字符串来自 @cloudgrid-io/ui/install-content (单位:千美元)INSTALL_TOOLS, (中文(简体) ), INSTALL_COMMANDS 编辑 ) (中文(简体).

入境点

JSON设定在 tokens/ 是DTCG,是编译CSS的来源.

CloudGrid 文件符号

圆形正方形的套接字, 作为浏览器标签、 主屏幕或 网络清单。 两个颜色道: mark 是品牌标志(纯正方形、白胶片、什么) 网站用途)和 mark-inverted 白色并带有紫色的格子(控制台的标签使用).

浏览器需要一个 URL, 所以复制到您的公共文件夹中, 或者通过您导入 捆绑:

// Next.js app router, e.g. app/layout.tsx
import favicon from "@cloudgrid-io/ui/brand/mark-inverted.svg"
import appleTouch from "@cloudgrid-io/ui/brand/mark-inverted-180.png"

export const metadata = {
  title: "CloudGrid",
  icons: { icon: favicon.src, apple: appleTouch.src },
}

<link rel="icon" href="/mark-inverted.svg" type="image/svg+xml">
<link rel="icon" href="/mark-inverted-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/mark-inverted-180.png">

在页面中,使用组件代替: <LogoMark tone="inverted" size={32} />绘制 同一常数的格言 Logo,并由此生成文件 恒定和品牌标志 scripts/generate-brand-mark.mjs,所以三个不能漂移.

空创建状态

新用户空状态用于列出某人的创作列表:一个破碎的盒子,一个扇子 缩略图环绕一个"+"平板,"尚未创建",一行和一个添加按钮.

import Link from "next/link"
import { EmptyCreations } from "@cloudgrid-io/ui"

<EmptyCreations href="/drop" linkComponent={Link} level={3} />
<EmptyCreations onAdd={openComposer} />

字和四个缩略图来自包; addLabel 财务报告和审定财务报表 previews 覆盖 他们。 它以容器查询方式排列,因此符合所给出的宽度。 缩略图 包含在组件中,并作为文件运输,用于任何其他用途: @cloudgrid-io/ui/brand/creations/1.webp 改为 4.webp (164x94,每架2至5KB). 之后 替换文件,运行 node scripts/generate-creation-previews.mjs。 。 。 .

组件中的图片:嵌入或解析

两个组件运送相片,他们故意用两种方式进行. 一个新的组成部分 图片按此规则选择一个,而不是由作者最后读取的示例选择.

• 嵌入 小型装饰性缺省,必须与没有消费者接线相通。 图片 在组件中作为数据 URI 内置 财务报告和审定财务报表 作为文件在 @cloudgrid-io/ui/brand/,有一个测试 保持两个字节平等. EmptyCreations 实值 例如: 4个缩略图, 大约13KB文件, 大约18KB 曾经内含 empty-creations-previews.ts。它正确地使其进口的时刻.
• 决定 大型套装,或任何套装,消费者需要选择。 图片是 文档,消费者将每个组件的 URL 交接(resolveSrc,或一个 src (每个项目)通过自己的捆绑机或公共文件夹. ShowcaseScroll 实例是: 19张照片,大约205KB文件. 内在的,他们会增加超过四分之一兆字节 每一个导入包桶的捆绑, 无论该页是否显示它们.

粗线:嵌入于几幅相片 总计约20KB以下,以及 组件没有它们就无用。 算了 下定决心吧 Base64 将文件长出大约一个 第三,一幅内在图片由枪管的每个消费者支付,而不只是由 它的页面.

电子邮件布局

import { renderEmail } from "@cloudgrid-io/ui/email"

const { html, text } = renderEmail({
  headline: "expiring-soon",
  title: "Pricing Grid expires in 5 days.",
  points: ["Not opened in 25 days", "Expires Friday, October 16"],
  action: { label: "Keep it", url: "https://my.cloudgrid.io/entities/ent_7a10?action=keep" },
  note: "Kept pages don't expire.",
  footer: { lines: ["You get this because you own Pricing Grid."] },
  assetBaseUrl: "https://assets.example.com/email/", // where YOU serve brand/email/*
})

无依相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 Gmail、 Outlook 和 Apple Mail 的表格和内置样式 包含每个链接的纯文本部分.

库名无主机 . 图片和字体只从发送者的 URL 中加载 :

• assetBaseUrl:服务此软件包 dist/brand/email/* (字签 有六个头条图像, 网格平板),从您自己的域名,并通过该基. 没有它,电子邮件是无图像的 对于每个客户端: 单词标记和头条是活文字, 这也正是 Outlook 用于 视窗总是得到.
• webFontsUrl: Space Grotesk 和 Manrope 的样式表, 在您选择的主机上 (单位:千美元)GOOGLE_FONTS_EMAIL_CSS 如果你接受谷歌的话). 没有它,系统堆栈会制造.
• items[].imageUrl: 您自己的图片 URL, 按给定使用 .

每个框架的预览, 如 Apple Mail、 Gmail 和 Outlook : /gallery/email 在登记册中.

版本

塞姆维尔。 切入值变化不大;清除量很大.

许可证

见藏所.