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>