Add utilities documentation

docs/_sass/components/code.scss

@@ -37,6 +37,20 @@
   z-index: 1;
 }
 
+.bd-snippet-inline {
+  display: inline-block;
+  margin-bottom: -0.25em;
+  vertical-align: bottom;
+
+  .highlight pre {
+    padding: 0.5em 0.75em 0.625em;
+  }
+
+  .button.bd-copy {
+    display: none;
+  }
+}
+
 .bd-snippet {
   @extend %block;
   --snippet-spacing: #{$block-spacing};
@@ -159,7 +173,7 @@
     &::before {
       background: linear-gradient(0deg, var(--hl-background), transparent);
       bottom: 0;
-      content: '';
+      content: "";
       display: block;
       left: 0;
       position: absolute;

docs/_sass/components/color.scss

@@ -0,0 +1,9 @@
+.bd-color {
+  border-radius: 2px;
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  display: inline-block;
+  float: left;
+  height: 24px;
+  margin-right: 8px;
+  width: 24px;
+}

docs/_sass/components/variables.scss

@@ -30,14 +30,14 @@
 
     pre {
       overflow: visible;
-      padding: 0;
+      padding: 0.25em 0.5em 0.375em;
       white-space: pre-wrap;
       white-space: break-spaces;
     }
   }
 
   .bd-copy {
-    font-size: 0.5em !important;
+    font-size: 0.75em !important;
     right: 0;
     top: 0;
   }