Carbon Design System 色彩 Sass 模块全指南carbon/colors 的用法、API 与源码解析【免费下载链接】carbonA design system built by IBM项目地址: https://gitcode.com/GitHub_Trending/carbo/carboncarbon/colors是 IBM Carbon Design System本仓库为 carbo/carbon 设计系统源码中用于在 Sass 环境访问 IBM Design Language 色彩的官方包。本文以 packages/colors/docs/sass.md 为核心完整讲解如何通过use引入颜色变量、遍历$colors映射表、使用全部色板与 hover 色变量并结合 packages/colors/src/colors.ts、packages/colors/src/rgb.ts 及 packages/colors/tests/scss-test.js 等源码与测试说明这些颜色值的来源与验证方式。读完本文你将能在自己的 Sass 工程中直接、程序化地使用整套 Carbon 色彩体系。安装与 Sass 入口carbon/colors是一个发布到 npm 的独立包仓库中的元数据见 packages/colors/package.json。包内通过sass: index.scss字段声明了 Sass 入口文件并支持 eyeglass 加载eyeglass.sassDir指向scss目录因此可以直接用模块路径引入。安装方式# npm npm install -S carbon/colors # 或 Yarn yarn add carbon/colors注意carbon/colors在 postinstall 阶段会运行 IBM Telemetry 采集脱敏匿名指标见 package.json 中的postinstall脚本与 telemetry.yml。安装即视为同意采集如需退出可查阅对应包文档。基础用法直接访问单个颜色变量在支持 Sass Modulesuse的编译环境中可以像这样直接取用某个颜色use carbon/colors; .selector { background: colors.$blue-50; }命名约定为swatch-grade例如colors.$blue-50; colors.$cool-gray-10; colors.$black-100; colors.$white-0;其中blue是色板swatch名50是色阶grade。完整的导出变量清单见下文 API 章节。与use相比旧式import已不再推荐如果你正在使用carbon/react等上层包也可以通过use carbon/react/scss/colors;间接引入同一套颜色变量参见 packages/colors/README.md。如果想免去colors.前缀可以使用as *通配引入仓库自带示例 packages/colors/examples/sass-modules/src/styles.scss 就是这么做的use carbon/colors as *; body { background: $gray-20; } .card { background: $white; width: 300px; padding: 1rem; border-radius: 8px; }程序化访问$colors 映射表除了单个颜色变量包还导出一个名为$colors的 Sass Map包含 IBM Design Language 的全部颜色。每个键是一个色板swatch名称值为另一个 Map键为色阶grade值为该色阶对应的十六进制色值。use carbon/colors; each $swatch, $grades in colors.$colors { each $grade in $grades { // 遍历每个色板的每个色阶 } }其数据结构示意如下$colors: ( blue: ( 10: #edf5ff, 20: #d0e2ff, 30: #a6c8ff, 40: #78a9ff, 50: #4589ff, 60: #0f62fe, 70: #0043ce, 80: #002d9c, 90: #001d6c, 100: #001141, ), );这种双层 Map 结构在源码中有直接对应。在 packages/colors/src/colors.ts 中每个色板都定义为一个对象如blue、yellow、coolGray最终聚合为colors: ColorGroupexport type ColorScale Recordnumber, string; export type ColorGroup Recordstring, ColorScale; export const colors: ColorGroup { black: { 100: black }, blue, coolGray, cyan, gray, green, magenta, orange, purple, red, teal, warmGray, white: { 0: white }, yellow, };从源码结构看$colorsMap 的键集与colors: ColorGroup的键集一一对应包含 12 个标准色板blue、cool-gray、cyan、gray、green、magenta、orange、purple、red、teal、warm-gray、yellow以及 black、white 两个特殊色板black 仅有 100 级white 仅有 0 级。这正是 API 表中$black-100、$white-0的由来。API 变量总览下面按分组列出carbon/colors导出的全部 Sass 变量。普通色变量的值为十六进制颜色hover 色变量为对应状态色$colors为 Map 类型。核心变量名称类型$colorsMap黑白基础色名称类型$blackColor$whiteColor$black-100Color$white-0Color标准色板每色板 10–100 共 10 级色板变量10–100blue$blue-10$blue-20$blue-30$blue-40$blue-50$blue-60$blue-70$blue-80$blue-90$blue-100cool-gray$cool-gray-10$cool-gray-20$cool-gray-30$cool-gray-40$cool-gray-50$cool-gray-60$cool-gray-70$cool-gray-80$cool-gray-90$cool-gray-100cyan$cyan-10$cyan-20$cyan-30$cyan-40$cyan-50$cyan-60$cyan-70$cyan-80$cyan-90$cyan-100gray$gray-10$gray-20$gray-30$gray-40$gray-50$gray-60$gray-70$gray-80$gray-90$gray-100green$green-10$green-20$green-30$green-40$green-50$green-60$green-70$green-80$green-90$green-100magenta$magenta-10$magenta-20$magenta-30$magenta-40$magenta-50$magenta-60$magenta-70$magenta-80$magenta-90$magenta-100orange$orange-10$orange-20$orange-30$orange-40$orange-50$orange-60$orange-70$orange-80$orange-90$orange-100purple$purple-10$purple-20$purple-30$purple-40$purple-50$purple-60$purple-70$purple-80$purple-90$purple-100red$red-10$red-20$red-30$red-40$red-50$red-60$red-70$red-80$red-90$red-100teal$teal-10$teal-20$teal-30$teal-40$teal-50$teal-60$teal-70$teal-80$teal-90$teal-100warm-gray$warm-gray-10$warm-gray-20$warm-gray-30$warm-gray-40$warm-gray-50$warm-gray-60$warm-gray-70$warm-gray-80$warm-gray-90$warm-gray-100yellow$yellow-10$yellow-20$yellow-30$yellow-40$yellow-50$yellow-60$yellow-70$yellow-80$yellow-90$yellow-100Hover 状态色每色板 10–100 共 10 级外加黑/白色板变量10-hover–100-hoverblack / white$black-hover$white-hoverblue$blue-10-hover$blue-20-hover$blue-30-hover$blue-40-hover$blue-50-hover$blue-60-hover$blue-70-hover$blue-80-hover$blue-90-hover$blue-100-hovercool-gray$cool-gray-10-hover$cool-gray-20-hover$cool-gray-30-hover$cool-gray-40-hover$cool-gray-50-hover$cool-gray-60-hover$cool-gray-70-hover$cool-gray-80-hover$cool-gray-90-hover$cool-gray-100-hovercyan$cyan-10-hover$cyan-20-hover$cyan-30-hover$cyan-40-hover$cyan-50-hover$cyan-60-hover$cyan-70-hover$cyan-80-hover$cyan-90-hover$cyan-100-hovergray$gray-10-hover$gray-20-hover$gray-30-hover$gray-40-hover$gray-50-hover$gray-60-hover$gray-70-hover$gray-80-hover$gray-90-hover$gray-100-hovergreen$green-10-hover$green-20-hover$green-30-hover$green-40-hover$green-50-hover$green-60-hover$green-70-hover$green-80-hover$green-90-hover$green-100-hovermagenta$magenta-10-hover$magenta-20-hover$magenta-30-hover$magenta-40-hover$magenta-50-hover$magenta-60-hover$magenta-70-hover$magenta-80-hover$magenta-90-hover$magenta-100-hoverorange$orange-10-hover$orange-20-hover$orange-30-hover$orange-40-hover$orange-50-hover$orange-60-hover$orange-70-hover$orange-80-hover$orange-90-hover$orange-100-hoverpurple$purple-10-hover$purple-20-hover$purple-30-hover$purple-40-hover$purple-50-hover$purple-60-hover$purple-70-hover$purple-80-hover$purple-90-hover$purple-100-hoverred$red-10-hover$red-20-hover$red-30-hover$red-40-hover$red-50-hover$red-60-hover$red-70-hover$red-80-hover$red-90-hover$red-100-hoverteal$teal-10-hover$teal-20-hover$teal-30-hover$teal-40-hover$teal-50-hover$teal-60-hover$teal-70-hover$teal-80-hover$teal-90-hover$teal-100-hoverwarm-gray$warm-gray-10-hover$warm-gray-20-hover$warm-gray-30-hover$warm-gray-40-hover$warm-gray-50-hover$warm-gray-60-hover$warm-gray-70-hover$warm-gray-80-hover$warm-gray-90-hover$warm-gray-100-hoveryellow$yellow-10-hover$yellow-20-hover$yellow-30-hover$yellow-40-hover$yellow-50-hover$yellow-60-hover$yellow-70-hover$yellow-80-hover$yellow-90-hover$yellow-100-hover源码级解析色值从哪里来carbon/colors的 Sass 产物由 TypeScript 源码经构建生成构建脚本见 packages/colors/package.json 的build命令使用carbon-cli bundle src/index.ts并将产物输出到scss/目录随后通过carbon-cli check scss/*.scss做校验。因此Sass 变量与 TypeScript 导出的 JS 常量共享同一份数据源。入口聚合packages/colors/src/index.ts 同时导出了colors.ts与rgb.ts这也解释了为什么同一个包既能服务 Sass也能服务 JavaScript详见 packages/colors/README.md 中的 ESM/CommonJS 用法。色值定义packages/colors/src/colors.ts 定义了每一个颜色的十六进制值例如blue60 #0f62fe、red60 #da1e28、green60 #24a148等并将同色板聚合为blue、red、green这类对象同时导出hoverColors: HoverColorGroup聚合全部 hover 色。透明色工具packages/colors/src/rgb.ts 提供rgba(hexCode, opacity)工具函数把十六进制色值解析为带透明度的rgba()字符串——这也是在构建产物中生成半透明色变量如各 hover 状态色的底层手段。构建期生成 Sass从package.json的build流程与 packages/colors/tests/scss-test.js 中的快照测试可以推断scss/下的.scss文件是由carbon/scss-generator依据colors.ts中的常量生成的因此 API 表、JS 对象与 Sass 变量三者必然保持一致。测试验证Public API 快照仓库通过 Jest 对 Sass 公开 API 做了快照测试。测试位于 packages/colors/tests/scss-test.js核心逻辑是import { SassRenderer } from carbon/test-utils/scss; const { render } SassRenderer.create(__dirname); test(Public API, async () { const { getValue } await render( use sass:meta; use ../index.scss as colors; $_: get-value(meta.module-variables(colors)); ); const variables getValue(0); expect(variables).toMatchSnapshot(); });它通过sass:meta的module-variables(colors)枚举模块导出的全部变量并与快照比对确保carbon/colors的 Sass 公开 API即上文表格中的每一个变量不因构建或重构而意外丢失或改变快照文件见 packages/colors/tests/snapshots/scss-test.js.snap。常见使用场景与注意事项主题化的推荐入口carbon/colors提供的是设计语言层面的基础色板若你的项目基于carbon/styles或carbon/react通常应优先通过上层包的 tokens 体系取色底层色板变量则适合作为构建自定义主题时的数据源。遍历$colors生成工具类利用each $swatch, $grades in colors.$colors可批量生成诸如背景色、文字色、边框色等工具类避免手写重复代码。hover 状态为按钮、卡片等交互元素提供 hover 色时直接使用对应的-hover变量而不是手动加深色值保证与其他 IBM 产品视觉一致。编译环境要求Sass Modulesuse语法要求 Dart Sass 的现代版本如果你仍在使用 LibSass /import需要先升级编译链路。产物来源scss/、es/、lib/、umd/等目录是构建产物安装包时由files白名单见 packages/colors/package.json随包发布源码改动需要重新执行yarn build才会反映到产物中。在仓库中运行示例仓库为carbon/colors提供了可运行的 Next.js 示例 packages/colors/examples/sass-modules展示use carbon/colors as *;的完整工程用法。运行前需先在仓库根目录执行yarn install yarn build生成各包产物然后进入示例目录安装依赖并启动开发服务器即可在浏览器中查看效果。【免费下载链接】carbonA design system built by IBM项目地址: https://gitcode.com/GitHub_Trending/carbo/carbon创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Carbon Design System 色彩 Sass 模块全指南：@carbon/colors 的用法、API 与源码解析
Carbon Design System 色彩 Sass 模块全指南carbon/colors 的用法、API 与源码解析【免费下载链接】carbonA design system built by IBM项目地址: https://gitcode.com/GitHub_Trending/carbo/carboncarbon/colors是 IBM Carbon Design System本仓库为 carbo/carbon 设计系统源码中用于在 Sass 环境访问 IBM Design Language 色彩的官方包。本文以 packages/colors/docs/sass.md 为核心完整讲解如何通过use引入颜色变量、遍历$colors映射表、使用全部色板与 hover 色变量并结合 packages/colors/src/colors.ts、packages/colors/src/rgb.ts 及 packages/colors/tests/scss-test.js 等源码与测试说明这些颜色值的来源与验证方式。读完本文你将能在自己的 Sass 工程中直接、程序化地使用整套 Carbon 色彩体系。安装与 Sass 入口carbon/colors是一个发布到 npm 的独立包仓库中的元数据见 packages/colors/package.json。包内通过sass: index.scss字段声明了 Sass 入口文件并支持 eyeglass 加载eyeglass.sassDir指向scss目录因此可以直接用模块路径引入。安装方式# npm npm install -S carbon/colors # 或 Yarn yarn add carbon/colors注意carbon/colors在 postinstall 阶段会运行 IBM Telemetry 采集脱敏匿名指标见 package.json 中的postinstall脚本与 telemetry.yml。安装即视为同意采集如需退出可查阅对应包文档。基础用法直接访问单个颜色变量在支持 Sass Modulesuse的编译环境中可以像这样直接取用某个颜色use carbon/colors; .selector { background: colors.$blue-50; }命名约定为swatch-grade例如colors.$blue-50; colors.$cool-gray-10; colors.$black-100; colors.$white-0;其中blue是色板swatch名50是色阶grade。完整的导出变量清单见下文 API 章节。与use相比旧式import已不再推荐如果你正在使用carbon/react等上层包也可以通过use carbon/react/scss/colors;间接引入同一套颜色变量参见 packages/colors/README.md。如果想免去colors.前缀可以使用as *通配引入仓库自带示例 packages/colors/examples/sass-modules/src/styles.scss 就是这么做的use carbon/colors as *; body { background: $gray-20; } .card { background: $white; width: 300px; padding: 1rem; border-radius: 8px; }程序化访问$colors 映射表除了单个颜色变量包还导出一个名为$colors的 Sass Map包含 IBM Design Language 的全部颜色。每个键是一个色板swatch名称值为另一个 Map键为色阶grade值为该色阶对应的十六进制色值。use carbon/colors; each $swatch, $grades in colors.$colors { each $grade in $grades { // 遍历每个色板的每个色阶 } }其数据结构示意如下$colors: ( blue: ( 10: #edf5ff, 20: #d0e2ff, 30: #a6c8ff, 40: #78a9ff, 50: #4589ff, 60: #0f62fe, 70: #0043ce, 80: #002d9c, 90: #001d6c, 100: #001141, ), );这种双层 Map 结构在源码中有直接对应。在 packages/colors/src/colors.ts 中每个色板都定义为一个对象如blue、yellow、coolGray最终聚合为colors: ColorGroupexport type ColorScale Recordnumber, string; export type ColorGroup Recordstring, ColorScale; export const colors: ColorGroup { black: { 100: black }, blue, coolGray, cyan, gray, green, magenta, orange, purple, red, teal, warmGray, white: { 0: white }, yellow, };从源码结构看$colorsMap 的键集与colors: ColorGroup的键集一一对应包含 12 个标准色板blue、cool-gray、cyan、gray、green、magenta、orange、purple、red、teal、warm-gray、yellow以及 black、white 两个特殊色板black 仅有 100 级white 仅有 0 级。这正是 API 表中$black-100、$white-0的由来。API 变量总览下面按分组列出carbon/colors导出的全部 Sass 变量。普通色变量的值为十六进制颜色hover 色变量为对应状态色$colors为 Map 类型。核心变量名称类型$colorsMap黑白基础色名称类型$blackColor$whiteColor$black-100Color$white-0Color标准色板每色板 10–100 共 10 级色板变量10–100blue$blue-10$blue-20$blue-30$blue-40$blue-50$blue-60$blue-70$blue-80$blue-90$blue-100cool-gray$cool-gray-10$cool-gray-20$cool-gray-30$cool-gray-40$cool-gray-50$cool-gray-60$cool-gray-70$cool-gray-80$cool-gray-90$cool-gray-100cyan$cyan-10$cyan-20$cyan-30$cyan-40$cyan-50$cyan-60$cyan-70$cyan-80$cyan-90$cyan-100gray$gray-10$gray-20$gray-30$gray-40$gray-50$gray-60$gray-70$gray-80$gray-90$gray-100green$green-10$green-20$green-30$green-40$green-50$green-60$green-70$green-80$green-90$green-100magenta$magenta-10$magenta-20$magenta-30$magenta-40$magenta-50$magenta-60$magenta-70$magenta-80$magenta-90$magenta-100orange$orange-10$orange-20$orange-30$orange-40$orange-50$orange-60$orange-70$orange-80$orange-90$orange-100purple$purple-10$purple-20$purple-30$purple-40$purple-50$purple-60$purple-70$purple-80$purple-90$purple-100red$red-10$red-20$red-30$red-40$red-50$red-60$red-70$red-80$red-90$red-100teal$teal-10$teal-20$teal-30$teal-40$teal-50$teal-60$teal-70$teal-80$teal-90$teal-100warm-gray$warm-gray-10$warm-gray-20$warm-gray-30$warm-gray-40$warm-gray-50$warm-gray-60$warm-gray-70$warm-gray-80$warm-gray-90$warm-gray-100yellow$yellow-10$yellow-20$yellow-30$yellow-40$yellow-50$yellow-60$yellow-70$yellow-80$yellow-90$yellow-100Hover 状态色每色板 10–100 共 10 级外加黑/白色板变量10-hover–100-hoverblack / white$black-hover$white-hoverblue$blue-10-hover$blue-20-hover$blue-30-hover$blue-40-hover$blue-50-hover$blue-60-hover$blue-70-hover$blue-80-hover$blue-90-hover$blue-100-hovercool-gray$cool-gray-10-hover$cool-gray-20-hover$cool-gray-30-hover$cool-gray-40-hover$cool-gray-50-hover$cool-gray-60-hover$cool-gray-70-hover$cool-gray-80-hover$cool-gray-90-hover$cool-gray-100-hovercyan$cyan-10-hover$cyan-20-hover$cyan-30-hover$cyan-40-hover$cyan-50-hover$cyan-60-hover$cyan-70-hover$cyan-80-hover$cyan-90-hover$cyan-100-hovergray$gray-10-hover$gray-20-hover$gray-30-hover$gray-40-hover$gray-50-hover$gray-60-hover$gray-70-hover$gray-80-hover$gray-90-hover$gray-100-hovergreen$green-10-hover$green-20-hover$green-30-hover$green-40-hover$green-50-hover$green-60-hover$green-70-hover$green-80-hover$green-90-hover$green-100-hovermagenta$magenta-10-hover$magenta-20-hover$magenta-30-hover$magenta-40-hover$magenta-50-hover$magenta-60-hover$magenta-70-hover$magenta-80-hover$magenta-90-hover$magenta-100-hoverorange$orange-10-hover$orange-20-hover$orange-30-hover$orange-40-hover$orange-50-hover$orange-60-hover$orange-70-hover$orange-80-hover$orange-90-hover$orange-100-hoverpurple$purple-10-hover$purple-20-hover$purple-30-hover$purple-40-hover$purple-50-hover$purple-60-hover$purple-70-hover$purple-80-hover$purple-90-hover$purple-100-hoverred$red-10-hover$red-20-hover$red-30-hover$red-40-hover$red-50-hover$red-60-hover$red-70-hover$red-80-hover$red-90-hover$red-100-hoverteal$teal-10-hover$teal-20-hover$teal-30-hover$teal-40-hover$teal-50-hover$teal-60-hover$teal-70-hover$teal-80-hover$teal-90-hover$teal-100-hoverwarm-gray$warm-gray-10-hover$warm-gray-20-hover$warm-gray-30-hover$warm-gray-40-hover$warm-gray-50-hover$warm-gray-60-hover$warm-gray-70-hover$warm-gray-80-hover$warm-gray-90-hover$warm-gray-100-hoveryellow$yellow-10-hover$yellow-20-hover$yellow-30-hover$yellow-40-hover$yellow-50-hover$yellow-60-hover$yellow-70-hover$yellow-80-hover$yellow-90-hover$yellow-100-hover源码级解析色值从哪里来carbon/colors的 Sass 产物由 TypeScript 源码经构建生成构建脚本见 packages/colors/package.json 的build命令使用carbon-cli bundle src/index.ts并将产物输出到scss/目录随后通过carbon-cli check scss/*.scss做校验。因此Sass 变量与 TypeScript 导出的 JS 常量共享同一份数据源。入口聚合packages/colors/src/index.ts 同时导出了colors.ts与rgb.ts这也解释了为什么同一个包既能服务 Sass也能服务 JavaScript详见 packages/colors/README.md 中的 ESM/CommonJS 用法。色值定义packages/colors/src/colors.ts 定义了每一个颜色的十六进制值例如blue60 #0f62fe、red60 #da1e28、green60 #24a148等并将同色板聚合为blue、red、green这类对象同时导出hoverColors: HoverColorGroup聚合全部 hover 色。透明色工具packages/colors/src/rgb.ts 提供rgba(hexCode, opacity)工具函数把十六进制色值解析为带透明度的rgba()字符串——这也是在构建产物中生成半透明色变量如各 hover 状态色的底层手段。构建期生成 Sass从package.json的build流程与 packages/colors/tests/scss-test.js 中的快照测试可以推断scss/下的.scss文件是由carbon/scss-generator依据colors.ts中的常量生成的因此 API 表、JS 对象与 Sass 变量三者必然保持一致。测试验证Public API 快照仓库通过 Jest 对 Sass 公开 API 做了快照测试。测试位于 packages/colors/tests/scss-test.js核心逻辑是import { SassRenderer } from carbon/test-utils/scss; const { render } SassRenderer.create(__dirname); test(Public API, async () { const { getValue } await render( use sass:meta; use ../index.scss as colors; $_: get-value(meta.module-variables(colors)); ); const variables getValue(0); expect(variables).toMatchSnapshot(); });它通过sass:meta的module-variables(colors)枚举模块导出的全部变量并与快照比对确保carbon/colors的 Sass 公开 API即上文表格中的每一个变量不因构建或重构而意外丢失或改变快照文件见 packages/colors/tests/snapshots/scss-test.js.snap。常见使用场景与注意事项主题化的推荐入口carbon/colors提供的是设计语言层面的基础色板若你的项目基于carbon/styles或carbon/react通常应优先通过上层包的 tokens 体系取色底层色板变量则适合作为构建自定义主题时的数据源。遍历$colors生成工具类利用each $swatch, $grades in colors.$colors可批量生成诸如背景色、文字色、边框色等工具类避免手写重复代码。hover 状态为按钮、卡片等交互元素提供 hover 色时直接使用对应的-hover变量而不是手动加深色值保证与其他 IBM 产品视觉一致。编译环境要求Sass Modulesuse语法要求 Dart Sass 的现代版本如果你仍在使用 LibSass /import需要先升级编译链路。产物来源scss/、es/、lib/、umd/等目录是构建产物安装包时由files白名单见 packages/colors/package.json随包发布源码改动需要重新执行yarn build才会反映到产物中。在仓库中运行示例仓库为carbon/colors提供了可运行的 Next.js 示例 packages/colors/examples/sass-modules展示use carbon/colors as *;的完整工程用法。运行前需先在仓库根目录执行yarn install yarn build生成各包产物然后进入示例目录安装依赖并启动开发服务器即可在浏览器中查看效果。【免费下载链接】carbonA design system built by IBM项目地址: https://gitcode.com/GitHub_Trending/carbo/carbon创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考