feat(core): add styles for vanilla form elements

#1

packages/website/src/templates/form.html

@@ -0,0 +1,127 @@
+<form>
+  <fieldset>
+    <div class="msp-mb-3">
+      <label for="exampleInputEmail1" class="">Email address</label>
+      <input
+        type="email"
+        class=""
+        id="exampleInputEmail1"
+        aria-describedby="emailHelp"
+        placeholder="user@email.com"
+      />
+      <div id="emailHelp" class="">
+        We'll never share your email with anyone else.
+      </div>
+    </div>
+    <div class="msp-mb-3">
+      <label for="exampleInputPassword1" class="">Password</label>
+      <input
+        type="password"
+        class=""
+        id="exampleInputPassword1"
+        placeholder="Secret..."
+      />
+    </div>
+    <div class="msp-mb-3">
+      <input type="checkbox" class="" id="exampleCheck1" />
+      <label class="" for="exampleCheck1">Check me out</label>
+    </div>
+
+    <div class="msp-mb-3">
+      <input
+        class="form-check-input"
+        type="radio"
+        name="flexRadioDefault"
+        id="flexRadioDefault1"
+      />
+      <label class="form-check-label" for="flexRadioDefault1">
+        Default radio
+      </label>
+    </div>
+
+    <div class="msp-mb-3">
+      <label class="form-check-label" for="flexRadioDefault1">
+        Default range
+      </label>
+      <input
+        class="form-check-input"
+        type="range"
+        name="flexRadioDefault"
+        id="flexRadioDefault1"
+      />
+    </div>
+
+    <div class="msp-mb-3">
+      <label class="" for="example-select">Select</label>
+      <select
+        id="example-select"
+        class="form-select"
+        aria-label="Default select example"
+      >
+        <option selected disabled hidden>Open this select menu</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </select>
+    </div>
+
+    <div class="msp-mb-3">
+      <label for="formFile" class="form-label"
+        >Default file input example</label
+      >
+      <input class="form-control" type="file" id="formFile" />
+    </div>
+
+    <div class="msp-mb-3">
+      <label for="exampleColorInput" class="form-label">Color picker</label>
+      <input
+        type="color"
+        class="form-control form-control-color"
+        id="exampleColorInput"
+        value="#563d7c"
+        title="Choose your color"
+      />
+    </div>
+
+    <button type="submit" class="">Submit</button>
+  </fieldset>
+</form>
+
+<br />
+
+<form>
+  <fieldset disabled class="msp-fieldset-border">
+    <legend>Disabled fieldset example</legend>
+    <div class="msp-mb-3">
+      <label for="disabledTextInput" class="form-label">Disabled input</label>
+      <input
+        type="text"
+        id="disabledTextInput"
+        class="form-control"
+        placeholder="Disabled input"
+      />
+    </div>
+    <div class="msp-mb-3">
+      <label for="disabledSelect" class="form-label"
+        >Disabled select menu</label
+      >
+      <select id="disabledSelect" class="form-select">
+        <option>Disabled select</option>
+      </select>
+    </div>
+    <div class="msp-mb-3">
+      <div class="form-check">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="disabledFieldsetCheck"
+          disabled
+        />
+        <label class="form-check-label" for="disabledFieldsetCheck">
+          Can't check this
+        </label>
+      </div>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </fieldset>
+</form>