Theme

The siimple framework can be customized using a theme, that is a collection of theme scales, breakpoints, mixins and root styles.

Theme scales

The following theme scales can be provided in your configuration, and are applied to specific CSS properties:

You do not need to provide all scales in the configuration: just configure the scales that you really need for your project.

Scales can be used in styles and mixins. Just provide a string with the scale key as the CSS property and siimple will automatically set this property with the value specified in the scale:

export default {
    fontSizes: {
        small: "0.875rem",
        body: "16px",
        large: "1.5rem",
    },
    styles: {
        "h1": {
            fontSize: "large", // <-- 1.5rem
        },
        "p": {
            fontSize: "body", // <-- 16px
        },
    },
};

Colors

In the colors section you can define your custom color palette. To allow creating interoperable themes for siimple, the following colors must be always provided in a color scale:

• primary: the primary color used in your theme.
• secodary: the secondary color used in your theme.
• text: color used for body text.
• background: color used for the body background.
• heading: color used in headings.
• muted: color used in borders and for filling form elements like inputs or textarea.
• highlight: color used to highlight text.

These are the colors defined in the base preset:

import colors from "@siimple/colors";

export default {
    colors: {
        primary: colors.blue["500"],
        secondary: colors.royal["500"],
        text: colors.gray["700"],
        background: "#000",
        heading: colors.gray["800"],
        muted: colors.gray["200"],
        highligh: colors.blue["200"],
    },
};

Font family

In the fonts section you can define the fonts used in your theme. The following fonts should be always provided:

• body: font used for the body text.
• heading: font used in heading elements.
• code: font used in <code> or <pre> elements.

This is the list of the default font sizes defined in siimple:

export default {
    fonts: {
        body: "-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif",
        heading: "inherit",
        code: "Menlo,Monaco,Consolas,monospace",
    },
};

Font size

In the fontSizes section you can define the font sizes used in your theme. It must be an array with the sizes from smallest to largest, where the size in the index 1 will be used as the size for the body text.

This is the list of the default font sizes defined in siimple:

export default {
    fontSizes: [
        "0.875rem",
        "16px",
        "1.25rem",
        "1.5rem",
        "1.75rem",
        "2rem",
        "2.5rem",
        "3rem",
        "3.5rem",
        "4rem",
        "4.5rem",
    ],
};

Font weight

In the fontWeights section you can define the font-weight values used in your theme. The following weights should be always provided in a font weights scale map:

• body: font-weight used for the body text.
• heading: font-weight used for heading elements.
• bold: font-weight used for <strong> elements.

This is the list of the default font weights defined in siimple:

export default {
    fontWeights: {
        body: "400",
        heading: "800",
        bold: "700",
    },
};

Line height

In the lineHeights section you can define the line heights used in your theme. The following line heights should be always provided:

• body: line height used for the body text.
• heading: line height used for headings.

This is the list of the default line heights defined in siimple:

export default {
    lineHeights: {
        body: "1.5",
        heading: "1.125",
    },
};

Mixins

Mixins allows you to define groups of styles that can be re-used throughout your custom styles. Mixins can be also used to customize built-in elements.

Mixins can be defined anywhere in the theme, and can be referenced in your styles using the property apply and providing the full path to your mixin.

export default {
    buttons: {
        // Will be applied to the button element
        default: {
            backgroundColor: "transparent",
            borderColor: "primary",
            borderStyle: "solid",
            borderWidth: "0.125rem",
            color: "primary",
        },
    },
    text: {
        small: {
            fontSize: "0",
            color: "text",
            opacity: 0.8,
        },
    },
    styles: {
        ".mySmallText": {
            // Inherit styles from text.small mixin
            apply: "text.small",
        },
    },
};

The apply property accepts a single mixin path as a string or a list of mixins paths:

export default {
    buttons: {
        bordered: {
            borderColor: "primary",
            borderStyle: "solid",
            borderWidth: "2px",
        },
        fullWidth: {
            textAlign: "center",
            width: "100%",
        },
    },
    styles: {
        ".myButton": {
            apply: [
                "buttons.bordered",
                "buttons.fullWidth",
            ],
            // other button styles
        },
    },
};