Кастомизация

ПоведениеStyle provider можно настроить - lля этого необходимо передать параметры в функцию useStyleProvider. Кроме того можно переопределить глобальные переменные дефолтной темы или создать свою тему.

Параметры useStyleProvider

Функция useStyleProvider принимает следующие параметры:

• emulate - принудительно создает эмуляцию Style provider в браузере (на сервере передавать не нужно, эмуляция будет создана автоматически),
• noscript - после приведения эмуляции Style provider к строке удаляет из нее скрипт, оставляя только начальные стили CSS (полезно для SSG),
• global (^4.2.0) - сохраняет и использует Style provider в качестве глобального объекта,
• attrs - атрибуты Style provider:
  • pre - префикс для названий таблиц стилей,
  • mode - режим генерации БЭМ-селекторов (a - data-атрибуты, c - классы),
  • min - режим генерации минифицированных БЭМ-селекторов (булев атрибут),
  • size - переопределяет глобальную CSS переменную базового размера,
  • time - переопределяет глобальную CSS переменную базового времени,
  • angle - переопределяет глобальную CSS переменную базового угла,
  • color (^4.3.0) - переопределяет глобальную CSS переменную базового цвета,
  • easing (^4.4.0) - переопределяет глобальную CSS переменную функции типа <easing function>.

Темизация

Тема EffCSS - это набор глобальных CSS-переменных.

Создание/обновление/удаление тем производится через объект контроллера тем, доступный из свойства theme объекта Style consumer:

import { useStyleProvider } from 'effcss';

const consumer = 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
            }
        }
    }
};
// можно переопределить переменные дефолтной темы
consumer.theme.update(themeVars);
// можно добавить новую тему
consumer.theme.add(themeVars, 'custom');
// можно включить новую тему
consumer.theme.switch('custom');

Обратите внимание на специальные ключи верхнего уровня $light и $dark - они задают контекст переменных для светлой и темной цветовой схемы соответственно.

Для доступа к глобальным переменным размера, времени и угла можно использовать утилиты size, time и angle соответственно.

Чтобы получить доступ к глобальной переменной color, воспользуйтесь утилитой color.root.

Числовые коэффициенты и их диапазоны доступны через утилиту coef.

Переменные в объектах hue, lightness и chroma используются утилитой palette.

Чтобы использовать произвольные переменные темы в своих функциях StyleSheet maker используйте утилиту themeVar:

import { TStyleSheetMaker } from 'effcss';

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

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

Мультитемизация

Чтобы использовать отличную от глобальной тему для конкретного 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)

Вместо определения множества тем вы можете задавать и переопределеять глобальные переменные для отдельных частей верстки с помощью веб-компонента effcss-override. Для этого передайте в атрибут values строку, подготовленную с помощью утилиты prepareOverrideValues:

import { prepareOverrideValues } from 'effcss';

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

export const Component = () => <effcss-override values={overridedValues}>
    <div>...</div>
<effcss-override>`

Компонент effcss-override по умолчанию имеет стиль display:contents;, чтобы не вызвать изменения в верстке.