Microsoft/vscode

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

Open

#43,111 opened on 2018年2月7日

GitHub で見る
 (4 comments) (18 reactions) (1 assignee)TypeScript (74,848 stars) (10,221 forks)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
Issue 種別
feature
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
3
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
half day
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
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.