Getting Started

Install Sewp

npm i @sewp/core

Make Sewp

It’s reccomended that you use makeSewp in a utility or theme file and export the functions and values it outputs to use as needed. For example theme.ts might look like:

const {globalCss, css, makeTheme, theme} = makeSewp({
    name: 'Sewp',
    prefix: '🥫',
    theme: {
        font: {
            sans: '"Inter", sans-serif',
            serif: '"Libre Baskerville", serif',
        },
        color: {
            red: '#ff0000',
            green: '#00ff00',
            blue: '#0000ff',
            background: '#ffffff',
            foreground: '#000000'
        }
    }
});

const {theme: darkTheme} = makeTheme("dark", {
    color: {
        background: '#000000',
        foreground: '#ffffff'
    }
})

export {css, globalCss, theme, darkTheme};

Styling There are a few ways to style using Sewp:

css

<div class={css({color: '$color.red'})}>This is red</div>
<div class={css`color: $color.green;`}>This is green</div>

With the babel css prop plugin the function can be used as a prop:

<div css={{color: '$color.red'}}>This is red</div>
<div css={`color: $color.green;`}>This is green</div>
<div css="color: $color.blue;">This is blue</div>

styled

const RedComponent = styled('div')({color: '$color.red'});
const GreenComponent = styled('div')`color: $color.green;`;

<RedComponent />
<GreenComponent />

Depending on the platform an additional package is required to use styled!