#Colors

import { colorsSystem } from "@poodle/system";

const theme = {
    colors: {
        sets: {
            primary: "red",
            secondary: "yellow",
            accent: {
                light: "#ccc",
                base: "#d5d5d5"
            }
        },
        modes: {
            dark: {
                primary: "cyan",
            },
        },
    },
};

const listSystem = compose(colorsSystem, spacingSystem);

export const system = createSystem(listSystem);

const styles = system({
    theme,
    bg: "primary",
  color: "accent.light",
  fill: "accent"
});

// Styles result
//  { background: "red" },
//  { color: "#ccc" },
//  { fill: "#d5d5d5" },


const styles2 = system({
    theme: {
        ...theme,
        mode: "dark"
    },
    bg: "primary",
});

// Styles result
//  { background: "cyan" },