import colors from "@siimple/colors";
import base from "@siimple/preset-base";

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

<div class="has-pl-4 has-pr-4 has-ml-auto has-mr-auto">
    <div class="card is-shadowed">
        <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">
            <i class="si-lock has-pr-1"></i>
            <span>Sign in</span>
        </button>
    </div>
</div>