adding

dist/fonts/stylesheet.css

@@ -1 +1,24 @@
-@font-face{font-family:'IBM Plex Mono';src:url('IBMPlexMono.eot');src:url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),url('IBMPlexMono.woff2') format('woff2'),url('IBMPlexMono.woff') format('woff'),url('IBMPlexMono.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Mono';src:url('IBMPlexMono-Bold.eot');src:url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),url('IBMPlexMono-Bold.woff2') format('woff2'),url('IBMPlexMono-Bold.woff') format('woff'),url('IBMPlexMono-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
+@font-face {
+    font-family: 'IBM Plex Mono';
+    src: url('IBMPlexMono.eot');
+    src: url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),
+        url('IBMPlexMono.woff2') format('woff2'),
+        url('IBMPlexMono.woff') format('woff'),
+        url('IBMPlexMono.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'IBM Plex Mono';
+    src: url('IBMPlexMono-Bold.eot');
+    src: url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),
+        url('IBMPlexMono-Bold.woff2') format('woff2'),
+        url('IBMPlexMono-Bold.woff') format('woff'),
+        url('IBMPlexMono-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+

spritemap.js

@@ -1 +1,13 @@
-(self.webpackChunkplain_ui=self.webpackChunkplain_ui||[]).push([[355],{256:()=>{}}]);
+(self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{
+
+/***/ "?4e0c":
+/*!******************************!*\
+  !*** spritemap-dummy-module ***!
+  \******************************/
+/***/ (() => {
+
+
+
+/***/ })
+
+}]);

src/scss/components/_field.scss

@@ -76,8 +76,8 @@
      * radio & checkbox
      *
      * <div class="field">
-     *     <input id="field__checkbox__1" class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
      *     <label for="field__checkbox__1" class="field__label">
+     *         <input class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
      *         <svg class="icon field__choice__unchecked" aria-hidden="true">
      *             <use xlink:href="symbol-defs.svg#icon-minus"></use>
      *         </svg>
@@ -108,6 +108,14 @@
         }
     }
 
+    svg.field-choice__unchecked {
+        fill: lighten($plain-ui__primary-light, 40%);
+    }
+
+    svg.field-choice__checked {
+        fill: $plain-ui__success-light;
+    }
+
     //
     .field-help, .field-error {
         display: inline-block;

src/scss/components/_icon.scss

@@ -16,6 +16,8 @@
         vertical-align: middle;
         overflow: hidden;
 
+        font-size: 1.2rem;
+
         fill: $plain-ui__primary-light;
     }