この CSS では、@function アットルールを用いてカスタム関数を定義しています。この関数は --lighter() と呼ばれ、入力された色の明るさを増したバージョンを出力します。--lighter() は 2 つの引数として <color> と <number> を取ります。相対色構文を用いて生成された oklch() 色を返します。入力された色を oklch() 色に変換し、その明度チャンネルを入力された数値分だけ増加させます。

css
@function --lighter(--color <color>, --lightness-adjust <number>: 0.2) returns
  <color> {
  result: oklch(from var(--color) calc(l + var(--lightness-adjust)) c h);
}

JavaScript

スクリプトはまず、HTMLStyleElement.sheet を使用してこの文書に添付されたスタイルシートへの参照を取得します。次に、CSSStylesheet.cssRules を通じて、スタイルシート内の唯一のルールである CSSFunctionRule への参照を取得します。

次に、関数内で唯一の連続した宣言群を表す CSSFunctionDeclarations オブジェクトを cssRules[0] で参照し、その記述子の情報を CSSFunctionDeclarations.style で取得した後、記述子のスタイル情報を参照します。この情報はすべてコンソールにログ出力されます。

js
// CSSFunctionRule を取得
const cssFunc = document.getElementById("css-output").sheet.cssRules[0];

// CSSFunctionDeclarations と CSSFunctionDescriptors へのアクセス
console.log(cssFunc.cssRules[0]); // CSSFunctionDeclarations
console.log(cssFunc.cssRules[0].style); // CSSFunctionDescriptors
console.log(cssFunc.cssRules[0].style.result);

特に注目すべきは、result プロパティが @function 本体の result 記述子と等しい点であり、これが oklch(from var(--color) calc(l + var(--lightness-adjust)) c h) であることです。