#Fonts

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

const theme: SystemThemeConfig = {
    colors: {
        sets: {
            primary: "cyan",
        },
    },
    fonts: {
        sets: {
            head: {
                fontWeight: "head",
                fontSize: "scale-2",
            },
        },
        scale: "1rem",
        weights: {
            lit: 600,
            head: 900,
        },

        families: {
            open: "open, serif",
        },
        sizeSets: {
            head: "17px",
        },
    },
};

const listSystem = compose(colorsSystem, fontsSystem);

export const system = createSystem(listSystem);

const styles1 = system({
    theme,
    fontSize: "scale-2",
    fontWeight: "lit",
    fontFamily: "open",
});

// Styles1 result
//  { fontSize: "2rem" },
//  { fontWeight: "lit" },
//  { fontFamily: "open, serif" },

const styles2 = system({
    theme,
    fontSize: "head",
});

// Styles2 result
//  { fontSize: "17px" },

const styles3 = system({
    theme,
    textStyle: "head",
});

// Styles3 result
//  { fontSize: "2rem" },
//  { fontWeight: "900" },