v4.3.0 (2022-09-18)

🌚 Introducing Color Modes

Color modes makes it easy to change the color mode of your website, including support for dark and light modes. Color modes are enabled with the useColorModes flag and providing a map with the colors for each color mode in the colorModes field of your configuration:

import colors from "@siimple/colors";

export default {
    useColorModes: true,
    colors: {
        text: colors.gray["700"],
        background: "#fff",
        primary: colors.blue["500"],
        // ...other colors
    },
    colorModes: {
        dark: {
            text: "#fff",
            background: colors.gray["800"],
        },
        // ...other color modes
    },
    // ...other configuration
};

Color modes documentation: https://www.siimple.xyz/color-modes.

⚙️ Automatically generate variants modifiers

In 4.3.0 some elements will generate additional variant modifiers based in the mixins that you specify in your configuration. For example, buttons will generate one additional variant for each item defined in the buttons field of your configuration.

As an example, the following buttons configuration:

export default {
    buttons: {
        default: {
            color: "white",
        },
        outlined: {
            borderColor: "primary",
            borderStyle: "solid",
            borderWidth: "2px",
        },
        full: {
            textAlign: "center",
            width: "100%",
        },
    },
};

Will generate the following CSS:

.button {
    /* Default button styles plus defined in buttons.default */
}
.button.is-outlined {
    /* Styles defined in buttons.outlined */
}
.button.is-full {
    /* Styles defined in buttons.full */
}

Note that the default variant will will be automatically applied to the base element styles instead of generating an additional .is-default modifier.

✨ Build siimple directly in your browser (experimental)

We introduce a new way to build siimple directly from your browser without any additional setup, using our new @siimple/standalone package: just include the following script tag in your HTML file:

<script type="module" src="https://esm.sh/@siimple/standalone"></script>

And provide your siimple configuration in a <script type="text/siimple"> tag:

<script type="text/siimple">
    export default {
        // ...your configuration
    };
</script>

Read more about the @siimple/standalone package here: https://www.siimple.xyz/packages/standalone

🎨 New icons

We have added 55 new icons to siimple-icons: https://www.siimple.xyz/icons.

💅 New presets

We have added three new presets in 4.3.0:

• Dark: https://www.siimple.xyz/presets/dark.
• Noir: https://www.siimple.xyz/presets/noir.
• Mustard: https://www.siimple.xyz/presets/mustard.

♻️ Deprecations

• We have deprecated some elements and moved them to the markup module.
  • divider element: use <hr> instead.
  • paragraph element: use <p> instead.
  • table element: use <table> instead.
  • title element: use headings instead (<h1>, <h2>, ...).
• The PostCSS plugin in siimple/postcss.cjs has been deprecated: migrate to the new plugin in @siimple/postcss package.
• The @siimple/styled package has been renamed as @siimple/css.