From 6ee55e1ab3a1adb1fefee441286618cb2d1b88aa Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 24 Sep 2024 17:41:56 +0900
Subject: [PATCH] Update CONTRIBUTING.md

---
 CONTRIBUTING.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 72c84c2f18..f61311f1e5 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -572,3 +572,24 @@ marginはそのコンポーネントを使う側が設定する
 
 ### indexというファイル名を使うな
 ESMではディレクトリインポートは廃止されているのと、ディレクトリインポートせずともファイル名が index だと何故か一部のライブラリ？でディレクトリインポートだと見做されてエラーになる
+
+## CSS Recipe
+
+### Lighten CSS vars
+
+``` css
+color: hsl(from var(--accent) h s calc(l + 10));
+```
+
+### Darken CSS vars
+
+``` css
+color: hsl(from var(--accent) h s calc(l - 10));
+```
+
+### Add alpha to CSS vars
+
+``` css
+color: color(from var(--accent) srgb r g b / 0.5);
+```
+