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>