empty state ui fixes, docs

pages/_docs/empty.md

@@ -3,6 +3,14 @@ title: Empty states
 description: Empty states/blanks are commonly used as placeholders for first time use, empty data or error screens.
 ---
 
+### Default markup
+
 {% example html %}
 {% include ui/empty.html %}
 {% endexample %}
+
+### Empty state with illustration
+
+{% example html %}
+{% include ui/empty.html illustration=true %}
+{% endexample %}

pages/_includes/ui/empty.html

 <div class="empty{% if include.bordered %} empty-bordered{% endif %}">
    <div class="empty-icon">
+      {% if include.illustration %}
+      {% include ui/illustration.html image="undraw_quitting_time_dm8t.svg" class="h-12" %}
+      {% else %}
       {% include ui/icon.html icon="search" %}
+      {% endif %}
    </div>
+
    <p class="empty-title h3">{{ include.title | default: "No results found" }}</p>
-   <p class="empty-subtitle">{{ include.title | default: "Try adjusting your search or filter to find what you're looking for." }}</p>
+   <p class="empty-subtitle">
+      {{ include.title | default: "Try adjusting your search or filter to find what you're looking for." }}
+   </p>
    <div class="empty-action">
       <button class="btn btn-primary">{{ include.button-text | default: "Search again" }}</button>
    </div>

pages/empty.html

@@ -3,4 +3,4 @@ title: Empty page
 done: true
 ---
 
-{% include ui/empty.html %}
+{% include ui/empty.html illustration=true %}

scss/_variables.scss

@@ -307,7 +307,7 @@ $flag-sizes: (
 
 //Utilities
 $utilities: (
-  "opacity": (
+  "spacing": (
     property: letter-spacing,
     class: tracking,
     values: (