尧图网页设计 
在 carbon 仓库中运行 Colors Preview一步步搭起 carbon/colors 色板预览应用【免费下载链接】carbonA design system built by IBM项目地址: https://gitcode.com/GitHub_Trending/carbo/carbon本篇指南讲解如何在 IBM Carbon Design System 的 monorepo 中启动 Colors Preview 示例应用从根目录构建工作区、安装依赖、启动开发服务器到在浏览器中查看完整的色板与 Hover 色对照表。读完本文你将掌握 monorepo 中示例应用的启动流程并能读懂该示例是如何基于carbon/colors的colors与hoverColors数据结构驱动整张色板表格渲染的。什么是 Colors Previewpackages/colors/examples/preview是carbon/colors包自带的一个 Next.js 示例项目它的作用非常直接把carbon/colors中导出的所有颜色 swatch色系和 grade色阶渲染成一张可浏览的表格并在同一行展示每个颜色对应的 Hover 态颜色方便设计系统使用者直观核对每个色板的取值。整个示例的核心数据并不需要额外配置——它直接依赖carbon/colors包导出的两个数据结构colors按色系分组的完整色板对象hoverColors每个色系对应的 Hover 态颜色映射。从 src/index.ts 可以看出这两个对象均由包内自动导出export * from ./colors; export * from ./rgb;而colors与hoverColors的定义位于 src/colors.ts 末尾例如export const colors: ColorGroup { black: { 100: black, }, blue, coolGray, cyan, gray, green, magenta, orange, purple, red, teal, warmGray, white: { 0: white, }, yellow, }; export const hoverColors: HoverColorGroup { whiteHover, blackHover, blueHover, coolGrayHover, cyanHover, grayHover, greenHover, magentaHover, orangeHover, purpleHover, redHover, tealHover, warmGrayHover, yellowHover, };其中ColorScale、ColorGroup、HoverColorGroup三个类型分别描述了“单个色系的 10/20/…/100 色阶映射”“色系名 → 色阶映射”和“色系 → Hover 色可能为单个值或整个色阶”的结构见 src/colors.ts。第一步在 carbon 仓库根目录构建由于carbon/colors以link:../../的方式被示例直接引用见 preview/package.json示例运行前必须先把工作区中的包构建好。先进入carbon仓库根目录执行yarn install yarn build说明yarn install会依据根目录的yarn.lock安装整个 monorepo 的所有依赖并通过link:协议把carbon/colors、carbon/styles等本地包链接进示例yarn build会执行工作区各包的构建脚本。对carbon/colors而言其build脚本是见 packages/colors/package.jsonbuild: yarn clean carbon-cli bundle src/index.ts --name CarbonColors node tasks/build.js yarn build:types carbon-cli check \scss/*.scss\它会基于src/index.ts产出 ESM / CJS / UMD 以及类型声明示例运行时引用的carbon/colors才能拿到实际的导出。注意本仓库是只读工作区上述命令仅为说明示例的常规启动流程实际操作请在你自己克隆的 carbon 仓库副本中执行。第二步进入示例目录并安装依赖根目录构建完成后进入示例目录cd packages/colors/examples/preview安装示例自身的依赖npm 或 yarn 均可yarn install # 或 npm install示例的依赖在 preview/package.json 中声明包括依赖用途carbon/colorslink:../../本地链接的色板数据包carbon/styleslink:../../../styles本地链接的 Carbon 样式包next、react、react-dom示例应用运行框架sass编译示例中的styles.scsschange-case-all辅助做命名格式转换第三步启动开发服务器在示例目录中运行yarn develop # 或 npm run developdevelop脚本即next见 preview/package.json 的scripts字段由 Next.js 启动开发服务器。随后用浏览器打开http://localhost:3000即可看到结果。如果你在仓库根目录运行过yarn build且当前处于生产构建阶段Next.js 配置会切换到静态导出模式从 next.config.js 可以看到生产构建PHASE_PRODUCTION_BUILD下会设置basePath: /colors/examples/preview、output: export并把产物输出到build目录而开发模式下则直接继承默认配置同时通过turbopack.root指向仓库根../../../..保证本地链接包能被正确解析。页面是如何渲染色板的进入页面后你会看到三列结构Token色板名-色阶、Value取值、HoverHover 态取值。这段逻辑位于 src/pages/index.jsimport { colors, hoverColors } from carbon/colors; function getHoverColor(swatch, grade) { for (const [key, value] of Object.entries(hoverColors)) { if (!key.includes(swatch)) { continue; } if (value[grade]) { return value[grade]; } return value; } throw new Error(Unable to find hover color for: ${swatch}-${grade}); }核心逻辑可以概括为遍历colors对象中的每个 swatch如blue、gray、yellow再遍历该 swatch 下每个 grade10到100黑/白为特例通过getHoverColor在hoverColors中查找对应 Hover 色先匹配 swatch 名若该 swatch 的 Hover 值是“色阶映射”就按 grade 取色否则直接返回该 swatch 的整体 Hover 值每个 token 行用内联样式绘制 50×50 的色块并输出十六进制颜色值。页面还通过getStaticProps在构建时注入lastBuiltOn时间戳页面顶部会显示 “Last built on …”方便确认当前预览内容对应的构建时间。样式入口在 src/pages/_app.js 中通过import ../styles.scss引入而 styles.scss 只use styles/reset as *;即加载src/styles/_reset.scss重置样式让色板表格以干净的默认样式呈现。关于 carbon/colors 导出的小结这次预览示例用到的数据源也正是carbon/colors的对外核心 API每个色系按swatch-grade命名例如blue-50、cool-gray-10、black-100、white-0每个色系既导出单个变量如blue50也导出按 grade 索引的对象如blue[50]除colors与hoverColors外src/rgb.ts 还提供了rgba(hexCode, opacity)工具函数用于把十六进制色值解析为带透明度的rgba()字符串。如果你想进一步深入carbon/colors的完整使用方式可以参考 packages/colors/README.md 以及同目录下的另一个示例 packages/colors/examples/sass-modulesSass 模块用法。【免费下载链接】carbonA design system built by IBM项目地址: https://gitcode.com/GitHub_Trending/carbo/carbon创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 carbon 仓库中运行 Colors Preview：一步步搭起 @carbon/colors 色板预览应用
在 carbon 仓库中运行 Colors Preview一步步搭起 carbon/colors 色板预览应用【免费下载链接】carbonA design system built by IBM项目地址: https://gitcode.com/GitHub_Trending/carbo/carbon本篇指南讲解如何在 IBM Carbon Design System 的 monorepo 中启动 Colors Preview 示例应用从根目录构建工作区、安装依赖、启动开发服务器到在浏览器中查看完整的色板与 Hover 色对照表。读完本文你将掌握 monorepo 中示例应用的启动流程并能读懂该示例是如何基于carbon/colors的colors与hoverColors数据结构驱动整张色板表格渲染的。什么是 Colors Previewpackages/colors/examples/preview是carbon/colors包自带的一个 Next.js 示例项目它的作用非常直接把carbon/colors中导出的所有颜色 swatch色系和 grade色阶渲染成一张可浏览的表格并在同一行展示每个颜色对应的 Hover 态颜色方便设计系统使用者直观核对每个色板的取值。整个示例的核心数据并不需要额外配置——它直接依赖carbon/colors包导出的两个数据结构colors按色系分组的完整色板对象hoverColors每个色系对应的 Hover 态颜色映射。从 src/index.ts 可以看出这两个对象均由包内自动导出export * from ./colors; export * from ./rgb;而colors与hoverColors的定义位于 src/colors.ts 末尾例如export const colors: ColorGroup { black: { 100: black, }, blue, coolGray, cyan, gray, green, magenta, orange, purple, red, teal, warmGray, white: { 0: white, }, yellow, }; export const hoverColors: HoverColorGroup { whiteHover, blackHover, blueHover, coolGrayHover, cyanHover, grayHover, greenHover, magentaHover, orangeHover, purpleHover, redHover, tealHover, warmGrayHover, yellowHover, };其中ColorScale、ColorGroup、HoverColorGroup三个类型分别描述了“单个色系的 10/20/…/100 色阶映射”“色系名 → 色阶映射”和“色系 → Hover 色可能为单个值或整个色阶”的结构见 src/colors.ts。第一步在 carbon 仓库根目录构建由于carbon/colors以link:../../的方式被示例直接引用见 preview/package.json示例运行前必须先把工作区中的包构建好。先进入carbon仓库根目录执行yarn install yarn build说明yarn install会依据根目录的yarn.lock安装整个 monorepo 的所有依赖并通过link:协议把carbon/colors、carbon/styles等本地包链接进示例yarn build会执行工作区各包的构建脚本。对carbon/colors而言其build脚本是见 packages/colors/package.jsonbuild: yarn clean carbon-cli bundle src/index.ts --name CarbonColors node tasks/build.js yarn build:types carbon-cli check \scss/*.scss\它会基于src/index.ts产出 ESM / CJS / UMD 以及类型声明示例运行时引用的carbon/colors才能拿到实际的导出。注意本仓库是只读工作区上述命令仅为说明示例的常规启动流程实际操作请在你自己克隆的 carbon 仓库副本中执行。第二步进入示例目录并安装依赖根目录构建完成后进入示例目录cd packages/colors/examples/preview安装示例自身的依赖npm 或 yarn 均可yarn install # 或 npm install示例的依赖在 preview/package.json 中声明包括依赖用途carbon/colorslink:../../本地链接的色板数据包carbon/styleslink:../../../styles本地链接的 Carbon 样式包next、react、react-dom示例应用运行框架sass编译示例中的styles.scsschange-case-all辅助做命名格式转换第三步启动开发服务器在示例目录中运行yarn develop # 或 npm run developdevelop脚本即next见 preview/package.json 的scripts字段由 Next.js 启动开发服务器。随后用浏览器打开http://localhost:3000即可看到结果。如果你在仓库根目录运行过yarn build且当前处于生产构建阶段Next.js 配置会切换到静态导出模式从 next.config.js 可以看到生产构建PHASE_PRODUCTION_BUILD下会设置basePath: /colors/examples/preview、output: export并把产物输出到build目录而开发模式下则直接继承默认配置同时通过turbopack.root指向仓库根../../../..保证本地链接包能被正确解析。页面是如何渲染色板的进入页面后你会看到三列结构Token色板名-色阶、Value取值、HoverHover 态取值。这段逻辑位于 src/pages/index.jsimport { colors, hoverColors } from carbon/colors; function getHoverColor(swatch, grade) { for (const [key, value] of Object.entries(hoverColors)) { if (!key.includes(swatch)) { continue; } if (value[grade]) { return value[grade]; } return value; } throw new Error(Unable to find hover color for: ${swatch}-${grade}); }核心逻辑可以概括为遍历colors对象中的每个 swatch如blue、gray、yellow再遍历该 swatch 下每个 grade10到100黑/白为特例通过getHoverColor在hoverColors中查找对应 Hover 色先匹配 swatch 名若该 swatch 的 Hover 值是“色阶映射”就按 grade 取色否则直接返回该 swatch 的整体 Hover 值每个 token 行用内联样式绘制 50×50 的色块并输出十六进制颜色值。页面还通过getStaticProps在构建时注入lastBuiltOn时间戳页面顶部会显示 “Last built on …”方便确认当前预览内容对应的构建时间。样式入口在 src/pages/_app.js 中通过import ../styles.scss引入而 styles.scss 只use styles/reset as *;即加载src/styles/_reset.scss重置样式让色板表格以干净的默认样式呈现。关于 carbon/colors 导出的小结这次预览示例用到的数据源也正是carbon/colors的对外核心 API每个色系按swatch-grade命名例如blue-50、cool-gray-10、black-100、white-0每个色系既导出单个变量如blue50也导出按 grade 索引的对象如blue[50]除colors与hoverColors外src/rgb.ts 还提供了rgba(hexCode, opacity)工具函数用于把十六进制色值解析为带透明度的rgba()字符串。如果你想进一步深入carbon/colors的完整使用方式可以参考 packages/colors/README.md 以及同目录下的另一个示例 packages/colors/examples/sass-modulesSass 模块用法。【免费下载链接】carbonA design system built by IBM项目地址: https://gitcode.com/GitHub_Trending/carbo/carbon创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考