@nex-ui/system/dist/esm/system.mjs

A lightweight and performant styling library based on Emotion, focusing on component architecture and developer experience.

import { createScales } from './scales.mjs';
import { createAliases } from './aliases.mjs';
import { createBreakpoints } from './breakpoints.mjs';
import { createCssFn } from './css.mjs';
import { createNormalize } from './normalize.mjs';
import { createSelectors } from './selectors.mjs';
import { createTokens } from './tokens/createTokens.mjs';

const createSystem = (config)=>{
    const { cssVarsPrefix = 'system', scales = {}, aliases = {}, breakpoints = {}, tokens = {}, semanticTokens = {}, selectors = {} } = config;
    const { getToken, getGlobalCssVars } = createTokens({
        tokens,
        semanticTokens,
        prefix: cssVarsPrefix
    });
    const { getPropertiesByAlias } = createAliases(aliases);
    const { getCategoryByProperty } = createScales(scales);
    const { getMediaSelectors } = createBreakpoints(breakpoints);
    const { getCustomizedSelector } = createSelectors({
        selectors,
        getMediaSelectors
    });
    const normalize = createNormalize({
        getCategoryByProperty,
        getPropertiesByAlias,
        getToken
    });
    const css = createCssFn({
        normalize,
        getCustomizedSelector
    });
    return {
        css,
        getToken,
        getGlobalCssVars
    };
};

export { createSystem };