カスタマイズ

useStyleProvider関数にパラメータを渡すことで、Style Providerの動作をカスタマイズできます。さらに、デフォルトテーマのグローバル変数を上書きしたり、独自のテーマを作成したりすることも可能です。

useStyleProvider のパラメータ

useStyleProvider 関数は、以下のパラメータを受け取ります。

• emulate - ブラウザで Style provider エミュレーションを強制的に作成します（サーバーに渡す必要はありません。エミュレーションは自動的に作成されます）。
• noscript - Style provider エミュレーションを文字列に変換した後、スクリプトを削除し、初期 CSS スタイルのみを残します（SSG に便利です）。
• global (^4.2.0) - Style provider をグローバルオブジェクトとして保存して使用します。
• attrs - Style provider の属性:
• pre - スタイルシート名のプレフィックス。
• mode - スコープセレクタを生成するモード（a - データ属性、c - クラス）。
• min - 縮小されたスコープセレクタを生成するモード（ブール値属性）。
• scheme (^4.14.0) - HTMLドキュメントのカラースキームプロパティ（lightまたはdark）を設定します。
• size - 基本サイズのグローバル CSS 変数を上書きします。
• space (^4.13.0) - 基本間隔のグローバル CSS 変数を上書きします。
• radius (^4.14.0) - 基本半径のグローバル CSS 変数を上書きします。
• time - 基本時間のグローバル CSS 変数を上書きします。
• angle - 基本角度のグローバル CSS 変数を上書きします。
• color (^4.3.0) - 基本色のグローバル CSS 変数を上書きします。
• easing (^4.4.0) - 基本イージング関数のグローバル CSS 変数を上書きします。
• contrast (^4.8.0) - コントラスト色のグローバル CSS 変数を上書きします。
• sans (^4.14.0) - サンセリフフォントファミリーのグローバル CSS 変数を上書きします。
• serif (^4.14.0) - セリフ体フォントファミリーのグローバルCSS変数を上書きします。
• mono (^4.14.0) - 等幅フォントファミリーのグローバルCSS変数を上書きします。

テーマ

EffCSSテーマは、グローバルCSS変数のセットです。

テーマは、Style providerオブジェクトのthemeプロパティから取得できるテーマコントローラオブジェクトを使用して作成、更新、削除します。

import { useStyleProvider } from 'effcss';

const provider = useStyleProvider();
const themeVars = {
    size: 18,
    time: 150,
    angle: 15,
    color: 'green',
    sz: {
        s: 10,
        m: 20,
        l: 30
    },
    coef: {
        1: 0.05,
        32: 220,
        15: 1.9
    },
    hue: {
        sec: 220,
    },
    $light: {
        lightness: {
            bg: {
                s: 0.785
            }
        },
        chroma: {
            fg: {
                rich: 0.145
            }
        }
    }
};
// you can override the default theme variables
provider.theme.update(themeVars);
// you can add a new theme
provider.theme.add(themeVars, 'custom');
// you can enable a new theme
provider.theme.switch('custom');

ライトカラーとダークカラーの配色設定における変数のコンテキストをそれぞれ設定する、特別なトップレベルキー$lightと$darkに注意してください。

グローバルなサイズ、スペース、時間、角度の変数にアクセスするには、それぞれtheme.size、theme.space、theme.time、theme.angleユーティリティを使用します。グローバルなプライマリーカラー、ニュートラルカラー、コントラストカラーの変数にアクセスするには、それぞれtheme.color、theme.neutral、theme.contrastユーティリティを使用します。これらの変数は、複数の値を設定し、インデックスを使用してそれらの値にアクセスすることをサポートしています。

// through the setter
styleProvider.size = [16, 18, 24];

// or via an attribute
<script is="effcss-provider" size="16;18;24;"></script>

// inside the maker, values are available by index
export const maker: TStyleSheetMaker = ({ theme: {size} }) => {
    return {
        '.sz-s': {
            width: size
        },
        '.sz-m': {
            width: size[2]
        },
        '.sz-l': {
            width: size[3]
        },
        '.sz-2xl': {
            // you can set your own multiplier
            width: size[3](2)
        }
    };
};

数値係数とその範囲は、coefユーティリティで取得できます。

hue、lightness、chromaオブジェクトは、paletteユーティリティで使用されます。

StyleSheet maker関数で任意のテーマ変数を使用するには、theme.variableユーティリティを使用します。

import { TStyleSheetMaker } from 'effcss';

type TGlobalVars = {
    sz: {
        s: string;
        m: string;
        l: string;
    }
};

export const maker: TStyleSheetMaker = ({ theme: {variable} }) => {
    return {
        '.sz-m': {
            width: variable<TGlobalVars>('sz.m', '100px') // '100px' - fallback value
        }
    };
};

値の配列 (v4.12.0)

テーマパラメータに配列形式の値が指定されている場合、配列の最初の要素を除く各要素に対して、その値のインデックスを接尾辞とする独自のCSS変数が作成されます。配列の最初の要素はインデックスが0であるため、無視されます。

const themeVars = {
    custom: ['12px', '24px', '36px']
    // --f0-custom: 12px; --f0-custom-1: 24px; --f0-custom-2: 36px;
};

このようなCSS変数にアクセスするには、theme.variableユーティリティを使用できます。

export const maker: TStyleSheetMaker = ({ theme: {variable} }) => {
    return {
        '.sz-m': {
            width: variable<TGlobalVars>('custom.1', '100px')
        }
    };
};

マルチテーマ

特定のHTML要素にグローバルテーマ以外のテーマを適用するには、引数なしでuse関数を呼び出し、目的のテーマを指定する修飾子を結果として得られるリゾルバーに渡します。

import type { TBaseStyleSheetMaker } from 'effcss';
import { useStyleProvider } from 'effcss';

const consumer = useStyleProvider();
const [resolver] = consumer.use();
const attrs = resolver<TBaseStyleSheetMaker>('..theme.custom');

グローバル変数の上書き (^4.5.0)

複数のテーマを定義する代わりに、Webコンポーネントeffcss-overrideを使用して、レイアウトの個々の部分に対してグローバル変数を設定および再定義できます。これを行うには、prepareOverrideValuesユーティリティで作成した文字列をvalues属性に渡します。

import { prepareOverrideValues } from 'effcss';

const overridedValues = prepareOverrideValues({
    size: 32,
    hue: {
        pri: 10
    },
    $light: {
        lightness: {
            bg: {
                xl: 0.95
            }
        }
    }
});

export const Component = () => <effcss-override neutral="grey" color="purple" values={overridedValues}>
    <div>...</div>
<effcss-override>`

バージョン ^4.8.0 以降では、Style provider と同じ属性 (例: size、angle、color) を使用してグローバル変数をオーバーライドすることもできます。これらの属性は values の値よりも優先されます。バージョン ^4.12.0 以降では、; で区切られた複数の値を指定できます。

<effcss-override size="16;18;24;" color="purple;white;#2192a7"></effcss-override>

バージョン^4.9.0以降では、scheme属性を使用してコンポーネントとそのコンテンツの配色を上書きできます。この属性にはlightまたはdarkの値を指定できます。

effcss-overrideコンポーネントは、レイアウトの変更を避けるため、デフォルトでdisplay:contents;スタイルが適用されます。

スタイルシートのチューニング (^4.13.0)

チューニングは、スタイルシートの柔軟性を高めるもう一つの方法です。外部アプリケーション向けに特別なチューニング変数を定義できます。

チューニング変数は独自のコントラクト型で宣言し、theme.tuningユーティリティを使用して実装できます。

type TMaker = {
    sz: 's' | 'm';
    rounded: '';
    card: {
        bg: 'pri' | 'sec';
        inv: '';
        footer: Record<string, never>;
    }
};

type TMakerTunings = {
    size: number;
    card: {
        color: string;
    }
};

const DEF_TUNING_VAL = 'rgb(82, 119, 119)';

const maker: TStyleSheetMaker = ({ select, theme: { tuning } }) => {
    const selector = select<TMaker>;
    const tuningVar = tuning<TMakerTunings>
    return {
        [selector('sz:s')]: {
            width: '10px'
        },
        [selector('card')]: {
            boxSizing: 'border-box'
        },
        // ...
        div: {
            background: tuningVar('card.color', DEF_TUNING_VAL)
        }
    };
};

アプリケーションでは、Style provider の tune メソッドを使用してスタイルシートを調整できます。

styleProvider.dx<TMaker>(maker, []);
const vars = styleProvider.tune<TMakerTunings>({
    card: {
        color: 'oklch(0.85 0.02 196.66)'
    }
}, maker);

const jsx = <div style={vars}>Welcome to the tuned area</div>;

INFO

スタイルプロバイダは、既に作成済みのスタイルシートのみを調整するため、dx、cx、またはuseメソッドを使用してスタイルシートを定義してください。