import colors from "@siimple/colors";
import theme from "@siimple/preset-theme";
import elements from "@siimple/preset-elements";

export default {
    ...theme,
    colors: {
        ...theme.colors,
        primary: colors.royal["500"],
        secondary: colors.mint["500"],
        text: colors.royal["800"],
        background: colors.royal["100"],
        muted: colors.royal["200"],
    },
    fonts: {
        ...theme.fonts,
        heading: ["Nunito", "sans-serif"],
        code: ["monospace"],
    },
    // ...other theme configuration
    styles: {
        ...elements.styles,
        // ...other styles
    },
};

<div class="has-maxw-96 has-px-4 has-mx-auto">
    <div class="card has-shadow-md">
        <div class="title is-3">Sign in</div>
        <div class="has-mb-4">
            <label class="label">Your email</label>
            <input type="text" class="input" placeholder="you@email.com" />
        </div>
        <div class="has-mb-6">
            <label class="label">Your password</label>
            <input type="password" class="input" placeholder="Password" />
        </div>
        <button class="button is-full has-bg-blue-600-hover">
            <i class="icon-lock has-pr-1"></i>
            <span>Sign in</span>
        </button>
    </div>
</div>