#Borders

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

const theme: SystemThemeConfig = {
    colors: {
        sets: {
            primary: "cyan",
        },
    },
    borders: {
        radius: {
            s: 10,
            m: "10em",
        },
        sets: {
            main: {
                color: "primary",
                style: "solid",
                width: "3px",
            },
            table: {
                color: "#fff",
                style: "solid",
                width: "1px",
            },
        },
    },
};

const listSystem = compose(colorsSystem, bordersSystem);

export const system = createSystem(listSystem);

const styles = system({
    theme,
    border: "main",
    borderRadius: "m",
});

// Styles result
//  { border: "3px solid cyan" },
//  { borderRadius: "10em" },