Catppuccin Palette API 参考全解析flavors、colorEntries 与完整类型系统一次看懂【免费下载链接】palette Soothing pastel theme to use within your projects!项目地址: https://gitcode.com/gh_mirrors/pal/paletteCatppuccin Palette是一款为前端项目提供舒缓马卡龙配色的开源色板库以catppuccin/palette包发布。它的核心是导出flavors、flavorEntries、colorEntries等 API 和一套完整的 TypeScript 类型系统让你可以在 Node、Deno 乃至任何 JS/TS 环境里以类型安全的方式取用 4 种口味flavor、每种 26 个颜色的 hex、rgb、hsl、oklch 值。本文带你一次看懂它的 API 参考与类型设计。如需本地阅读源码可执行git clone https://gitcode.com/gh_mirrors/pal/palette一、30 秒上手安装与导入 项目当前版本为1.8.0见 deno.json 中的version字段支持 npm 与 Deno 两种安装方式npm install catppuccin/paletteimport { flavors, flavorEntries, version } from catppuccin/palette;整个库的对外入口只有一个文件 mod.ts颜色数据则由 palette.json 提供二者共同构成数据 类型的 API 参考核心。二、flavors四口味flavors核心入口flavors是一个对象键为 4 个口味名值为该口味的完整色板类型CatppuccinFlavors。 四个口味的设计定位如下口味Emoji明暗特点latte亮色唯一的浅色主题dark: falsefrappe暗色低饱和、低对比macchiato暗色中饱和、中对比mocha☕暗色高饱和、高对比每个口味对象包含以下字段定义见 mod.ts 的CatppuccinFlavor类型字段类型说明namestring口味名称如Latteemojistring口味图标需 Unicode 13.0ordernumber在调色板规范中的顺序0 起darkboolean是否为暗色主题colorsCatppuccinColors26 个颜色的键值对ansiColorsCatppuccinAnsiColors8 组终端 ANSI 颜色映射colorEntriesEntriesCatppuccinColors可类型安全遍历的颜色数组ansiColorEntriesEntriesCatppuccinAnsiColors可类型安全遍历的 ANSI 颜色数组三、Catppuccin 的 26 色系统Accent 与 Monochromatic每个口味的colors都包含26 个颜色由两类组成1. Accent14 个强调色类型AccentNamemod.ts列出了全部强调色名rosewater·flamingo·pink·mauve·red·maroon·peach·yellow·green·teal·sky·sapphire·blue·lavender 这些颜色都标记accent: true适合作为品牌色、链接色、图标高亮等。2. Monochromatic12 个中性色类型MonochromaticNamemod.ts是从前景到背景的完整灰阶text→subtext1→subtext0→overlay2→overlay1→overlay0→surface2→surface1→surface0→base→mantle→crust️ 使用建议text系列用于文字overlay系列用于悬浮/悬停元素surface/base/mantle/crust从内到外层层加深背景是搭建深色 UI 的标准骨架。两类合并得到总类型ColorName AccentName | MonochromaticName。四、colorEntries 与 flavorEntries类型安全的遍历器Object.entries()在原生 TypeScript 里会丢失键的联合类型而 Catppuccin Palette 专门定义了工具类型EntriesTmod.ts为遍历场景提供带类型的键值对数组flavorEntries.map(([flavorName, flavor]) { console.log(${flavor.emoji} ${flavor.name} is a ${flavor.dark ? dark : light} theme.); flavor.colorEntries.map(([colorName, { hex, rgb, accent }]) { // colorName 是 ColorName 联合类型hex、rgb 都有完整补全 }); });flavorEntries遍历 4 个口味本身元素形如[mocha, CatppuccinFlavor]flavor.colorEntries遍历单个口味的 26 个颜色元素形如[rosewater, ColorFormat]flavor.ansiColorEntries遍历 8 组 ANSI 颜色元素形如[blue, AnsiColorGroups] 一句话记忆要按名取用用flavors.x.colors.y要循环生成用各种*Entries。五、ColorFormat一个颜色的四种色彩空间ColorFormat是理解整个类型系统的钥匙mod.ts每个颜色对象都同时提供字段格式示例用途nameRosewater规范中的显示名order0在调色板规范中的排序hex#dc8a78通用十六进制色值rgb{ r: 220, g: 138, b: 120 }拼rgb()/rgba()字符串hsl{ h: 10.8, s: 0.588, l: 0.667 }拼hsl()前端微调很方便oklch{ l: 0.714, c: 0.105, h: 33.1 }现代感知均匀色彩空间1.8.0 新增accenttrue是否为强调色✅ 这意味着无论是 CSS 变量、终端染色还是设计稿取色一份数据即可满足所有场景无需再做格式转换。六、ANSI 终端配色ansiColors 参考️ 做 CLI 工具时ansiColors字段提供 8 组标准终端色black/red/green/yellow/blue/magenta/cyan/white每组内含normal0–7 号色与bright8–15 号色两个AnsiColorFormat对象除上述色彩空间外还带code字段ANSI 转义码编号。⚠️ 小细节bright并不总是更亮而是更饱和另外black组在暗色口味下映射的是surface1/surface2而非纯黑可参考 mod.test.ts 中的断言逻辑。七、Web 前端用法CSS 与 Sass除了 JS 包仓库还内置了 Web 生态的派生产物CSS 变量docs/css.md 说明了如何引入catppuccin/palette/style之后即可写var(--ctp-mocha-text)、rgba(var(--ctp-macchiato-base-rgb) / 0.9)这样的响应式变量。Sassdocs/sass.md 提供两种用法——单口味use mocha直接拿到$base、$text变量或引入聚合的catppuccin.$palette映射一次性生成 4 个口味的类。构建脚本这些样式由 scripts/builders/npm/css.ts、scripts/builders/npm/scss.ts、scripts/builders/npm/less.ts 从同一份 JSON 自动生成保证多格式颜色永不漂移。八、数据来源与版本追踪 所有颜色并非手写而是由 scripts/gen_palette.ts 从每个口味的原始 hex 值出发借助 colorjs.io 计算 rgb/hsl/oklch 后写入 palette.json当前version: 1.8.0。库导出的version常量与之保持一致方便你的应用做兼容性检查。 完整变更历史可查阅 CHANGELOG.md例如 1.8.0 新增了oklch数值1.5.0 引入了整套 ANSI 颜色1.2.0 为每个口味加入了 emoji。九、类型速查表类型含义FlavorNamelatte \| frappe \| macchiato \| mochaAccentName/MonochromaticName14 个强调色 / 12 个中性色名ColorName两者之并集共 26 个ColorsT/AnsiColorsT以颜色名为键、T为值的映射ColorFormat单个颜色的 hex/rgb/hsl/oklch 结构AnsiColorGroups/AnsiColorFormatANSI 组normalbright/ 单个 ANSI 色CatppuccinFlavor/CatppuccinFlavors单口味 / 四口味聚合对象CatppuccinColors只读的完整颜色映射总结 Catppuccin Palette 的 API 设计思路非常清晰JSON 存数据、TS 类型保安全、Entries 助遍历、多色彩空间全覆盖。记住flavors取用、colorEntries遍历、ColorFormat数据形态这三件套再配合 CSS/Sass 派生格式你就能在任何项目中快速落地这套舒缓马卡龙配色了。【免费下载链接】palette Soothing pastel theme to use within your projects!项目地址: https://gitcode.com/gh_mirrors/pal/palette创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Catppuccin Palette API 参考全解析：flavors、colorEntries 与完整类型系统一次看懂
Catppuccin Palette API 参考全解析flavors、colorEntries 与完整类型系统一次看懂【免费下载链接】palette Soothing pastel theme to use within your projects!项目地址: https://gitcode.com/gh_mirrors/pal/paletteCatppuccin Palette是一款为前端项目提供舒缓马卡龙配色的开源色板库以catppuccin/palette包发布。它的核心是导出flavors、flavorEntries、colorEntries等 API 和一套完整的 TypeScript 类型系统让你可以在 Node、Deno 乃至任何 JS/TS 环境里以类型安全的方式取用 4 种口味flavor、每种 26 个颜色的 hex、rgb、hsl、oklch 值。本文带你一次看懂它的 API 参考与类型设计。如需本地阅读源码可执行git clone https://gitcode.com/gh_mirrors/pal/palette一、30 秒上手安装与导入 项目当前版本为1.8.0见 deno.json 中的version字段支持 npm 与 Deno 两种安装方式npm install catppuccin/paletteimport { flavors, flavorEntries, version } from catppuccin/palette;整个库的对外入口只有一个文件 mod.ts颜色数据则由 palette.json 提供二者共同构成数据 类型的 API 参考核心。二、flavors四口味flavors核心入口flavors是一个对象键为 4 个口味名值为该口味的完整色板类型CatppuccinFlavors。 四个口味的设计定位如下口味Emoji明暗特点latte亮色唯一的浅色主题dark: falsefrappe暗色低饱和、低对比macchiato暗色中饱和、中对比mocha☕暗色高饱和、高对比每个口味对象包含以下字段定义见 mod.ts 的CatppuccinFlavor类型字段类型说明namestring口味名称如Latteemojistring口味图标需 Unicode 13.0ordernumber在调色板规范中的顺序0 起darkboolean是否为暗色主题colorsCatppuccinColors26 个颜色的键值对ansiColorsCatppuccinAnsiColors8 组终端 ANSI 颜色映射colorEntriesEntriesCatppuccinColors可类型安全遍历的颜色数组ansiColorEntriesEntriesCatppuccinAnsiColors可类型安全遍历的 ANSI 颜色数组三、Catppuccin 的 26 色系统Accent 与 Monochromatic每个口味的colors都包含26 个颜色由两类组成1. Accent14 个强调色类型AccentNamemod.ts列出了全部强调色名rosewater·flamingo·pink·mauve·red·maroon·peach·yellow·green·teal·sky·sapphire·blue·lavender 这些颜色都标记accent: true适合作为品牌色、链接色、图标高亮等。2. Monochromatic12 个中性色类型MonochromaticNamemod.ts是从前景到背景的完整灰阶text→subtext1→subtext0→overlay2→overlay1→overlay0→surface2→surface1→surface0→base→mantle→crust️ 使用建议text系列用于文字overlay系列用于悬浮/悬停元素surface/base/mantle/crust从内到外层层加深背景是搭建深色 UI 的标准骨架。两类合并得到总类型ColorName AccentName | MonochromaticName。四、colorEntries 与 flavorEntries类型安全的遍历器Object.entries()在原生 TypeScript 里会丢失键的联合类型而 Catppuccin Palette 专门定义了工具类型EntriesTmod.ts为遍历场景提供带类型的键值对数组flavorEntries.map(([flavorName, flavor]) { console.log(${flavor.emoji} ${flavor.name} is a ${flavor.dark ? dark : light} theme.); flavor.colorEntries.map(([colorName, { hex, rgb, accent }]) { // colorName 是 ColorName 联合类型hex、rgb 都有完整补全 }); });flavorEntries遍历 4 个口味本身元素形如[mocha, CatppuccinFlavor]flavor.colorEntries遍历单个口味的 26 个颜色元素形如[rosewater, ColorFormat]flavor.ansiColorEntries遍历 8 组 ANSI 颜色元素形如[blue, AnsiColorGroups] 一句话记忆要按名取用用flavors.x.colors.y要循环生成用各种*Entries。五、ColorFormat一个颜色的四种色彩空间ColorFormat是理解整个类型系统的钥匙mod.ts每个颜色对象都同时提供字段格式示例用途nameRosewater规范中的显示名order0在调色板规范中的排序hex#dc8a78通用十六进制色值rgb{ r: 220, g: 138, b: 120 }拼rgb()/rgba()字符串hsl{ h: 10.8, s: 0.588, l: 0.667 }拼hsl()前端微调很方便oklch{ l: 0.714, c: 0.105, h: 33.1 }现代感知均匀色彩空间1.8.0 新增accenttrue是否为强调色✅ 这意味着无论是 CSS 变量、终端染色还是设计稿取色一份数据即可满足所有场景无需再做格式转换。六、ANSI 终端配色ansiColors 参考️ 做 CLI 工具时ansiColors字段提供 8 组标准终端色black/red/green/yellow/blue/magenta/cyan/white每组内含normal0–7 号色与bright8–15 号色两个AnsiColorFormat对象除上述色彩空间外还带code字段ANSI 转义码编号。⚠️ 小细节bright并不总是更亮而是更饱和另外black组在暗色口味下映射的是surface1/surface2而非纯黑可参考 mod.test.ts 中的断言逻辑。七、Web 前端用法CSS 与 Sass除了 JS 包仓库还内置了 Web 生态的派生产物CSS 变量docs/css.md 说明了如何引入catppuccin/palette/style之后即可写var(--ctp-mocha-text)、rgba(var(--ctp-macchiato-base-rgb) / 0.9)这样的响应式变量。Sassdocs/sass.md 提供两种用法——单口味use mocha直接拿到$base、$text变量或引入聚合的catppuccin.$palette映射一次性生成 4 个口味的类。构建脚本这些样式由 scripts/builders/npm/css.ts、scripts/builders/npm/scss.ts、scripts/builders/npm/less.ts 从同一份 JSON 自动生成保证多格式颜色永不漂移。八、数据来源与版本追踪 所有颜色并非手写而是由 scripts/gen_palette.ts 从每个口味的原始 hex 值出发借助 colorjs.io 计算 rgb/hsl/oklch 后写入 palette.json当前version: 1.8.0。库导出的version常量与之保持一致方便你的应用做兼容性检查。 完整变更历史可查阅 CHANGELOG.md例如 1.8.0 新增了oklch数值1.5.0 引入了整套 ANSI 颜色1.2.0 为每个口味加入了 emoji。九、类型速查表类型含义FlavorNamelatte \| frappe \| macchiato \| mochaAccentName/MonochromaticName14 个强调色 / 12 个中性色名ColorName两者之并集共 26 个ColorsT/AnsiColorsT以颜色名为键、T为值的映射ColorFormat单个颜色的 hex/rgb/hsl/oklch 结构AnsiColorGroups/AnsiColorFormatANSI 组normalbright/ 单个 ANSI 色CatppuccinFlavor/CatppuccinFlavors单口味 / 四口味聚合对象CatppuccinColors只读的完整颜色映射总结 Catppuccin Palette 的 API 设计思路非常清晰JSON 存数据、TS 类型保安全、Entries 助遍历、多色彩空间全覆盖。记住flavors取用、colorEntries遍历、ColorFormat数据形态这三件套再配合 CSS/Sass 派生格式你就能在任何项目中快速落地这套舒缓马卡龙配色了。【免费下载链接】palette Soothing pastel theme to use within your projects!项目地址: https://gitcode.com/gh_mirrors/pal/palette创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考