AI 摘要：本文系统介绍了现代 CSS 颜色系统的演变与新特性，重点包括新版 rgb() 与 hsl() 的语法变化、相对颜色（relative colours）的用法、改进的亮暗主题处理方式、颜色空间（colour spaces）的应用，以及应对更广色域设备的新工具。作者旨在帮助不专注设计的开发者高效掌握现代 CSS 色彩特性，从而提高代码一致性与灵活性。

1. 现代 CSS 写法演进
• 从传统的十六进制与函数写法过渡到更灵活的空间分隔语法
• 新版 rgb() 与 hsl() 可直接包含透明度通道，无需“a”版本
• / 用于区分主色值与 alpha 通道，提高一致性
• 空格分隔语法引入新规范以支持更多色彩函数，如 oklch()、hwb()、color()

2. 相对颜色（Relative Colours）

• 允许从已有颜色生成新颜色，通过语法 rgb(from #ff0000 r g b) 实现
• 可结合自定义属性（CSS variables）动态调整不透明度或亮度
• 帮助快速生成同系浅色、深色变化，便于主题一致管理
• 可用于构造组件风格如提示框（toast），只需修改基础色

3. 改进的亮暗主题（Theming）
• 传统方法需在媒体查询与主题类中重复定义变量
• light-dark() 函数允许在单条声明中同时定义明亮与暗色配色
• 结合 color-scheme 可根据用户系统偏好自动切换
• 支持组件级别的独立 color-scheme 控制，增强设计灵活度

4. 颜色空间（Colour Spaces）
• 颜色空间决定浏览器如何计算与过渡颜色
• 支持在 linear-gradient() 中指定颜色空间，如 oklch、lab、hwb
• 新空间可避免传统 sRGB 中的颜色过渡失真
• “longer hue” 参数用于控制渐变方向，生成更自然或彩虹式渐变

5. 扩展色域与精准配色
• 介绍 color() 函数与广色域（wide gamut）空间 display-p3 的使用场景
• 适用于与品牌色或印刷标准（如 Pantone）匹配需求
• 浏览器会自动降级不支持的色域，保证兼容性

6. 展望与总结
• CSS 色彩能力远超以往，包括即将介绍的 color-mix()、oklch() 等函数
• 开发者无需成为设计师，也能直接在代码层面进行色彩管理与调和

Piccalilli

A pragmatic guide to modern CSS colours - part one

Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series, by Kevin Powell, is for you.

AI 摘要：本文为 TypeScript 的枚举（enum）功能辩护，指出当前对其的批评多源于误用而非特性本身的问题。作者强调枚举应作为符号化（symbolic）工具用于内部逻辑，而非直接绑定字面值或暴露为公共 API，并详细分析了错误使用枚举的三大风险及正确实践方法。

1. 引言与背景
• 近年来越来越多开发者批评 TypeScript 的枚举功能，倾向于使用联合类型或常量对象。
• 作者认为问题在于对枚举的误解和误用，而非特性本身。

2. 枚举的符号化本质
• 枚举应代表抽象概念而非具体值（如 "red" 或 #FF0000 ），类似 ES6 的 Symbol 特性。
• 示例：交通灯状态应通过 enum TrafficLight { Red, Yellow, Green } 抽象表示，而非绑定字符串或颜色代码。

3. TypeScript 枚举的陷阱
• 允许字面值赋值：如 enum TrafficLight { Red = "red" } 导致以下问题：
• 抽象泄漏：逻辑层与表示层耦合（如 UI 直接依赖 "red" 字符串）。
• 脆弱性：字符串比较易受大小写或拼写错误影响。
• 公共 API 污染：枚举值暴露后难以修改（如后端 API 返回 "Processing"）。

4. 正确使用建议
• 仅用于内部逻辑：枚举值应作为代码中的符号标签，不直接序列化或展示。
• 显式转换层：通过 Map 或映射函数将枚举值转换为外部需要的表示形式。

5. 结论
• 批评者常抱怨枚举“不易序列化”，但作者指出这是误用——枚举本就不应直接用于序列化场景。
• TypeScript 枚举虽有设计差异，但在符号化场景中仍具价值，关键在于区分抽象与具体表示。

Yazan's Software Thoughts

Understanding the Value of TypeScript Enums

Discover the true purpose of TypeScript enums and how to use them effectively as symbolic representations in your code

AI 摘要：本文探讨设计系统中色彩空间的重要性，分析 sRGB 与 Display P3 的差异，介绍 OKLCH 的优势与局限，并强调未来色彩空间规范化的必要性。

本文通过类比鞋码系统的复杂性，引出设计系统中色彩空间的重要性。传统使用十六进制值（如 #ff0000 ）或 RGB 值的色彩定义方式缺乏对色彩空间的明确标注，可能导致显示偏差。sRGB 是当前 CSS 和 Figma 的默认色彩空间，但 Display P3 因其更广的色域（尤其是更鲜艳的红、绿色）正成为未来趋势。

Tailwind CSS 4 和 Radix 3 已转向 Display P3，并采用 OKLCH 色彩空间。OKLCH 通过亮度（Lightness）、色度（Chroma）和色相（Hue）实现感知一致性，但需注意其超广色域可能导致部分颜色无法在现有设备上准确显示。此外，OKLCH 在颜色混合时可能因色相差异产生意外结果，需结合 OKLAB 等其他空间优化。

文章建议将色彩创建与部署分离：创作阶段可利用 OKLCH 等高级空间，而部署时需兼顾代码紧凑性与兼容性。最后提到工具 Pinwheel 可辅助色彩编辑、混合及代码生成。