CSSカスタムプロパティと相対色構文で色管理

Transcript

1. CSSカスタムプロパティと 相対色構文で色管理
2. Googleの作ったマテリアルデザインのカラーシステムをCSSのカスタムプロパティと相対色構文を使えばいい 感じに定義できるのでは?と思ったので試してみました。
3. 自己紹介 名前 衣笠和樹 会社 株式会社シーズ 仕事 ECウェブサイトの実装など 使っている言語 PHP, JavaScript, TypeScript
4. 目次 1. マテリアルデザイン 1. カラーシステム 2. デザイントークン 2. CSSカスタムプロパティ 3. 相対色構文 1. Oklch 4. デモ 5. まとめ 6. ありがとうございました。 7. 参考
5. マテリアルデザイン Googleの作ったデザインシステム。 UIコンポーネントを用意してくれたり、色やタイポグラフィ、レイアウトのルールを決めてくれている。
6. カラーシステム キーカラー ベースとなる色 色調パレット 各キーカラーを明るさの階調 カラースキーム UIで使用する役割ごとに分けた色、色調パレットから色 を割り当てる
7. デザイントークン マテリアルデザインのスタイルの基盤。Web, スマホア プリなど複数のプラットフォームで共有できるように スタイルに必要な値に名前を付けて管理するもの。カ ラーシステムでは色調パレットとカラースキームの色 がデザイントークンとして定義されている。
8. CSSカスタムプロパティ 値を再利用するためのもの。デザイントークンはこれで定義する。 :root { /* reference */ --md-ref-color-primary-40: blue; --md-ref-color-primary-100: white; /* system */ --md-sys-color-primary: var(--ref-color-primary-40); --md-sys-color-on-primary: var(--ref-color-primary-100); /* component */ --md-filled-button-container-color: var(--md-sys-color-primary); --md-filled-button-label-text-color: var(--md-sys-color-on-primary); } .filled-button { background-color: var(--md-filled-button-container-color); color: var(--md-filled-button-label-text-color); }
9. 相対色構文 色の定義を絶対値ではなく、別の色を基に定義できるCSSの構文。これと後述するOklchを使えば色調パレ ットをキーカラーの指定だけでいい感じに定義できる。 まだほとんどのブラウザでサポートされてない。 Chromeは119でサポートされた。 :root { --md-ref-key-color-primary: blue; --md-ref-color-primary-10: oklch(from var(--md-ref-key-color-primary) 10%, c h); --md-ref-color-primary-20: oklch(from var(--md-ref-key-color-primary) 20%, c h); --md-ref-color-primary-30: oklch(from var(--md-ref-key-color-primary) 30%, c h); }
10. Oklch 明度、彩度、色相で色を調整するときにはよくHSLを使われるが、Oklchはそれよりいいかんじの色空間。青 系の色相で明度を変えたときの違いが顕著で、Oklchの方が自然に感じる。HSLの方は明度を上げると紫っぽ くなる。 https://codepen.io/umekobutea/full/poqXWqa
11. デモ ソースコード https://github.com/umekobutea/color-theming-sample Google製のライブラリMaterial Webを使う https://material-web.dev/ マテリアルデザインのUIコンポーネントをWeb Componentで実装したもの。 デザイントークンをCSSカスタムプロパティで指定してスタイルをカスタマイズできる。
12. まとめ 簡単には使えなさそう デザイントークンの定義が大変。 ただ1度作ってしまえば再利用できそう。 OklchとHSLそれそれ一長一短。 Oklchは彩度の調整も必要そう。 https://bottosson.github.io/misc/colorpicker/ HSLは色にこだわりがなければ使えそう。 カラースキーマ(Surface Color)に適用されている色調のトーンがあってなさそう。 HSLにあわせてあるんじゃないかと思う。
13. ありがとうございました。
14. 参考 https://m3.material.io/ https://triple-underscore.github.io/css-color5-ja.html https://developer.chrome.com/blog/css-relative-color-syntax/ https://bottosson.github.io/posts/oklab/ https://material-web.dev/