#Usage

#Quickstart

The package is just a function that accepts a CSS object and returns a CSS object with spacing scales, colors, and common CSS properties.

First, you must have a config

The config can be composed of different systems.

  • colorsSystem
  • fontsSystem
  • layoutSystem
  • spacingSystem
  • bordersSystem
  • flexSystem
  • pseudosSystem
  • shadowSystem
import {
    compose,
    spacingSystem,
    colorsSystem,
    createSystem,
} from "@poodle/system";


const listSystem = compose(colorsSystem, spacingSystem);


export const system = createSystem(listSystem);


const styles = system({
    theme: {
        colors: {
            sets: {
                primary: {
                    base: "red",
                },
                secondary: "yellow",
            },
        },
        spacing: {
            scale: "4px",
            sets: {
                custom: "1rem",
            },
        },
    },


    color: "primary.base",
    pt: "scale-4",
    mt: "custom",
});


// Styles result
//  { color: "red" },
//  { paddingTop: "16px" },
//  { marginTop: "1rem" },