Microsoft/vscode

[css] Lab colors and other CSS Color Module Level 4 features

Open

#43,111 建立於 2018年2月7日

在 GitHub 查看
 (4 留言) (18 反應) (1 負責人)TypeScript (74,848 star) (10,221 fork)batch import
css-less-scssfeature-requesthelp wanted

描述

See the CSS Color Module Level 4 specification.

While the specification is still a draft and browsers don't support these features yet, there already exists a PostCSS plugin that (partially) implements them, so it's actually already possible to use at least a part of them.

.example {
	background-color: lab(33 43 -47);
	box-shadow: 0 0 20px lch(54 107 41 / 10%);
}

Would be nice to get previews for those colors in VS Code like it's shown for rgb/rgba/hsl colors.

貢獻者指南

技術棧
typescriptcss
領域
frontend
議題類型
feature
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
3
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
half day
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
stale
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
clear
前置要求
knowledge of CSS Color Module Level 4understanding of VS Code color provider API
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
40
研究方向
Review existing color preview implementation in VS Code for hex/rgb/hsl colors, likely in 'src/vs/editor/contrib/colorPicker'. The PostCSS plugin at https://github.com/jonathantneal/postcss color lab can serve as a reference for parsing lab() and lch() functions. The issue mentions that browser support is pending, so focus on adding syntax highlighting and preview via VS Code's DocumentColorProvider interface.