@noema/motif/dist/motif-style.js

A type-safe styling library for React components built on top of [Vanilla Extract](https://vanilla-extract.style/). `@noema/motif` allows you to create styled components with consistent theme-aware props that cleanly separate styling from component logic.

import { createVar, style } from '@vanilla-extract/css';
export function motifStyle(properties, options = {}) {
    const { prefix = 'motif', base, shorthands } = options;
    const refs = {};
    const classNames = {};
    for (const key of properties) {
        const cssVar = createVar(`${prefix}-${key}`);
        refs[key] = cssVar;
        // Class that applies the CSS variable
        classNames[key] = style({ vars: { [key]: cssVar } });
    }
    const result = { classNames, refs, shorthands };
    if (base) {
        return { ...result, baseClassName: style(base, `${prefix}-base`) };
    }
    return result;
}