@ulu/frontend 0.1.0-beta.39 → 0.1.0-beta.40

package/docs-dev/sass/components/form-theme/index.html

@@ -286,6 +286,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -1335,6 +1350,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/css-icon/">
@@ -2802,6 +2832,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -3851,6 +3896,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/css-icon/">
@@ -5106,15 +5166,6 @@
 <div class="toc">
                 <ol>
                     
-                    <li><a href="#variables">Variables</a>
-            
-                <ol>
-                    
-                    <li><a href="#variable-config">$config</a>
-            		</li>
-                </ol>
-            		</li>
-
                     <li><a href="#mixins">Mixins</a>
             
                 <ol>
@@ -5154,6 +5205,15 @@
                     
                     <li><a href="#function-get">get()</a>
             		</li>
+                </ol>
+            		</li>
+
+                    <li><a href="#variables">Variables</a>
+            
+                <ol>
+                    
+                    <li><a href="#variable-config">$config</a>
+            		</li>
                 </ol>
             		</li>
                 </ol>
@@ -5171,201 +5231,456 @@
 <div class="type-large">
 <p>A container for content that highlights important information, provides context, or guides user attention within an interface</p>
 </div>
-<h2 id="variables" tabindex="-1">Variables</h2>
+<h2 id="mixins" tabindex="-1">Mixins</h2>
 <div class="sassdoc-item-header">
-<h3 id="variable-config" tabindex="-1">$config</h3>
+<h3 id="mixin-set" tabindex="-1">set()</h3>
   <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
   </div>
 </div>
-<p>Module Settings</p>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-  <span class="pjs-token pjs-string">"color"</span>                                     <span class="pjs-token pjs-punctuation">:</span> inherit<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"color-placeholder"</span>                         <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"type-tertiary"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"drupal"</span>                                    <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"error-color"</span>                               <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"danger"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"error-highlight-color"</span>                     <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>251<span class="pjs-token pjs-punctuation">,</span> 242<span class="pjs-token pjs-punctuation">,</span> 242<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"error-selector"</span>                            <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">".is-danger"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"file-button-style"</span>                         <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-weight-label"</span>                         <span class="pjs-token pjs-punctuation">:</span> bold<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-weight-legend"</span>                        <span class="pjs-token pjs-punctuation">:</span> bold<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-weight-placeholder"</span>                   <span class="pjs-token pjs-punctuation">:</span> normal<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-weight-input"</span>                         <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-weight-textarea"</span>                      <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-weight-select"</span>                        <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"input-border"</span>                              <span class="pjs-token pjs-punctuation">:</span> element.<span class="pjs-token pjs-function">get-rule-style</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"input-border-radius"</span>                       <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"item-margin-y"</span>                            <span class="pjs-token pjs-punctuation">:</span> 0.75em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"input-padding-x"</span>                           <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"input-padding-y"</span>                           <span class="pjs-token pjs-punctuation">:</span> 0.25em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"input-min-width"</span>                           <span class="pjs-token pjs-punctuation">:</span> 10em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"input-background-color"</span>                    <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"item-border-radius"</span>                        <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"item-highlight-width"</span>                      <span class="pjs-token pjs-punctuation">:</span> 6px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"required-color"</span>                            <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"danger"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"text-input-margin-bottom"</span>                  <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"text-input-margin-top"</span>                     <span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"warning-color"</span>                             <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"warning"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"warning-highlight-color"</span>                   <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>255<span class="pjs-token pjs-punctuation">,</span> 249<span class="pjs-token pjs-punctuation">,</span> 237<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"warning-selector"</span>                          <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">".is-warning"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-color"</span>                         <span class="pjs-token pjs-punctuation">:</span> currentColor<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-size"</span>                          <span class="pjs-token pjs-punctuation">:</span> 1.15em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-touch-size"</span>                    <span class="pjs-token pjs-punctuation">:</span> 2em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-background-color"</span>              <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-background-color-checked"</span>      <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-background-color-hover"</span>        <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-background-color-indeterminate"</span><span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-border"</span>                        <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-border-color-hover"</span>            <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-border-color-checked"</span>          <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-border-color-indeterminate"</span>    <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-border-color-focus"</span>            <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-outline"</span>                       <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-outline-hover"</span>                 <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-outline-checked"</span>               <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-outline-focus"</span>                 <span class="pjs-token pjs-punctuation">:</span> 1px solid white<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-touch-color-hover"</span>             <span class="pjs-token pjs-punctuation">:</span> #e8e8e8<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-touch-color-focus"</span>             <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-radio-size"</span>                    <span class="pjs-token pjs-punctuation">:</span> 0.3em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-checkmark-width"</span>               <span class="pjs-token pjs-punctuation">:</span> 0.38em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-checkmark-height"</span>              <span class="pjs-token pjs-punctuation">:</span> 0.68em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-checkmark-offset-y"</span>            <span class="pjs-token pjs-punctuation">:</span> -0.2em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-checkmark-stroke-size"</span>         <span class="pjs-token pjs-punctuation">:</span> 0.18em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-mark-color"</span>                    <span class="pjs-token pjs-punctuation">:</span> currentColor<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-mark-color-hover"</span>              <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-mark-color-focus"</span>              <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-mark-color-checked"</span>            <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-mark-color-indeterminate"</span>      <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-disabled-opacity"</span>              <span class="pjs-token pjs-punctuation">:</span> 0.6<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"check-input-border-radius"</span>                 <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"description-color"</span>                         <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"description-margin"</span>                        <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>0.25em 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"description-max-width"</span>                     <span class="pjs-token pjs-punctuation">:</span> 25em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"description-line-height"</span>                   <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"fieldset-background"</span>                       <span class="pjs-token pjs-punctuation">:</span> transparent<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"fieldset-border"</span>                           <span class="pjs-token pjs-punctuation">:</span> none<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"fieldset-margin-bottom"</span>                    <span class="pjs-token pjs-punctuation">:</span> 1rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"fieldset-margin-top"</span>                       <span class="pjs-token pjs-punctuation">:</span> 1rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"fieldset-padding"</span>                          <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"fieldset-margin-compact"</span>                   <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"fieldset-border-radius"</span>                    <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"fieldset-legend-color"</span>                     <span class="pjs-token pjs-punctuation">:</span> inherit<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"fieldset-legend-border-bottom"</span>             <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"fieldset-legend-padding-bottom"</span>            <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"fieldset-legend-margin-bottom"</span>             <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"select-border-radius"</span>                      <span class="pjs-token pjs-punctuation">:</span> 4px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"select-background-color"</span>                   <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"select-border"</span>                             <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"select-padding-x"</span>                          <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"select-padding-y"</span>                          <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"select-image"</span>                              <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"select-image-size"</span>                         <span class="pjs-token pjs-punctuation">:</span> 0.9em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"select-image-offset"</span>                       <span class="pjs-token pjs-punctuation">:</span> 0.7em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"select-image-margin"</span>                       <span class="pjs-token pjs-punctuation">:</span> 0.65em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"inline-gap"</span>                                <span class="pjs-token pjs-punctuation">:</span> 1em
-<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<p>Change modules $config</p>
 <details>
   <summary>File Information</summary>
 <ul>
 <li><strong>File:</strong> _form-theme.scss</li>
 <li><strong>Group:</strong> form-theme</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 25-107</li>
-<li><strong>Lines (code):</strong> 109-193</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 195-198</li>
+<li><strong>Lines (code):</strong> 200-202</li>
 </ul>
 </details>
-<h4 id="map-properties" tabindex="-1">Map Properties</h4>
+<h4 id="examples" tabindex="-1">Examples</h4>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-form-theme-set</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">(</span> <span class="pjs-token pjs-string">"property"</span> <span class="pjs-token pjs-punctuation">:</span> value <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<h4 id="parameters" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
 <th style="text-align:left">Name</th>
 <th style="text-align:left">Type</th>
-<th style="text-align:left">Default</th>
 <th style="text-align:left">Description</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td style="text-align:left">color</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">inherit</td>
-<td style="text-align:left">Color of the text of the form.</td>
-</tr>
-<tr>
-<td style="text-align:left">color-placeholder</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">&quot;type-tertiary&quot;</td>
-<td style="text-align:left">Color for the placeholder text.</td>
-</tr>
-<tr>
-<td style="text-align:left">drupal</td>
-<td style="text-align:left">Boolean</td>
-<td style="text-align:left">false</td>
-<td style="text-align:left">Toggle if using drupal to include drupal specific styling.</td>
-</tr>
-<tr>
-<td style="text-align:left">error-color</td>
-<td style="text-align:left">Color</td>
-<td style="text-align:left">&quot;danger&quot;</td>
-<td style="text-align:left">Type color for errors.</td>
-</tr>
-<tr>
-<td style="text-align:left">error-highlight-color</td>
-<td style="text-align:left">Color</td>
-<td style="text-align:left">rgb(251, 242, 242)</td>
-<td style="text-align:left">Outline color of error container.</td>
-</tr>
-<tr>
-<td style="text-align:left">error-selector</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">&quot;.is-danger&quot;</td>
-<td style="text-align:left">Class for error styling.</td>
-</tr>
-<tr>
-<td style="text-align:left">file-button-style</td>
-<td style="text-align:left">Map</td>
-<td style="text-align:left">true</td>
-<td style="text-align:left">@joe-check should this have a fallback</td>
-</tr>
-<tr>
-<td style="text-align:left">font-weight-label</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">bold</td>
-<td style="text-align:left">Font weight of the labels.</td>
-</tr>
-<tr>
-<td style="text-align:left">font-weight-legend</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">bold</td>
-<td style="text-align:left">Font weight of the legend.</td>
-</tr>
-<tr>
-<td style="text-align:left">font-weight-placeholder</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">normal</td>
-<td style="text-align:left">Font weight of placeholder text.</td>
-</tr>
-<tr>
-<td style="text-align:left">font-weight-input</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">null</td>
-<td style="text-align:left">Font weight of input text.</td>
-</tr>
-<tr>
-<td style="text-align:left">font-weight-textarea</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">null</td>
-<td style="text-align:left">Font weight of textarea text.</td>
-</tr>
-<tr>
-<td style="text-align:left">font-weight-select</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">null</td>
-<td style="text-align:left">Font weight of select text.</td>
+<td style="text-align:left">$changes</td>
+<td style="text-align:left"><code>Map</code></td>
+<td style="text-align:left">Map of changes</td>
 </tr>
-<tr>
-<td style="text-align:left">input-border</td>
-<td style="text-align:left">CssValue</td>
+</tbody>
+</table>
+<h4 id="require" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
+</ul>
+<div class="sassdoc-item-header">
+<h3 id="mixin-styles" tabindex="-1">styles()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Output component stylesheet</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _form-theme.scss</li>
+<li><strong>Group:</strong> form-theme</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 218-220</li>
+<li><strong>Lines (code):</strong> 222-259</li>
+</ul>
+</details>
+<h4 id="examples-1" tabindex="-1">Examples</h4>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-form-theme-styles</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<h4 id="require-1" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/components/form-theme/#mixin-drupal-layout-element-styles">drupal-layout-element-styles()</a></li>
+<li><a href="/frontend/sass/components/form-theme/#mixin-layout-element-styles">layout-element-styles()</a></li>
+<li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
+</ul>
+<div class="sassdoc-item-header">
+<h3 id="mixin-element-required-char" tabindex="-1">element-required-char()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Required Character styles (ie. &quot;*&quot;)</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _form-theme.scss</li>
+<li><strong>Group:</strong> form-theme</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 498-498</li>
+<li><strong>Lines (code):</strong> 499-506</li>
+</ul>
+</details>
+<h4 id="require-2" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
+</ul>
+<div class="sassdoc-item-header">
+<h3 id="mixin-element-help-text" tabindex="-1">element-help-text()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Help text / Description</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _form-theme.scss</li>
+<li><strong>Group:</strong> form-theme</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 508-508</li>
+<li><strong>Lines (code):</strong> 509-516</li>
+</ul>
+</details>
+<h4 id="require-3" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
+</ul>
+<div class="sassdoc-item-header">
+<h3 id="mixin-element-form-item-block" tabindex="-1">element-form-item-block()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Styles for form item that should have label as block and text input</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _form-theme.scss</li>
+<li><strong>Group:</strong> form-theme</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 518-518</li>
+<li><strong>Lines (code):</strong> 519-530</li>
+</ul>
+</details>
+<h4 id="require-4" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
+</ul>
+<div class="sassdoc-item-header">
+<h3 id="mixin-element-form-actions" tabindex="-1">element-form-actions()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Footer of form (with button for example)</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _form-theme.scss</li>
+<li><strong>Group:</strong> form-theme</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 532-532</li>
+<li><strong>Lines (code):</strong> 533-536</li>
+</ul>
+</details>
+<div class="sassdoc-item-header">
+<h3 id="mixin-element-form-actions-right" tabindex="-1">element-form-actions-right()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Footer of form (with button for example)</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _form-theme.scss</li>
+<li><strong>Group:</strong> form-theme</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 538-538</li>
+<li><strong>Lines (code):</strong> 539-541</li>
+</ul>
+</details>
+<div class="sassdoc-item-header">
+<h3 id="mixin-layout-element-styles" tabindex="-1">layout-element-styles()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Layout styling for static/app sites</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _form-theme.scss</li>
+<li><strong>Group:</strong> form-theme</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 543-543</li>
+<li><strong>Lines (code):</strong> 544-597</li>
+</ul>
+</details>
+<h4 id="require-5" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/components/form-theme/#mixin-element-required-char">element-required-char()</a></li>
+<li><a href="/frontend/sass/components/form-theme/#mixin-element-help-text">element-help-text()</a></li>
+<li><a href="/frontend/sass/components/form-theme/#mixin-element-form-item-block">element-form-item-block()</a></li>
+<li><a href="/frontend/sass/components/form-theme/#mixin-element-form-actions">element-form-actions()</a></li>
+<li><a href="/frontend/sass/components/form-theme/#mixin-element-form-actions-right">element-form-actions-right()</a></li>
+<li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
+</ul>
+<div class="sassdoc-item-header">
+<h3 id="mixin-drupal-layout-element-styles" tabindex="-1">drupal-layout-element-styles()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Layout styles but using drupal form structures</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _form-theme.scss</li>
+<li><strong>Group:</strong> form-theme</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 599-599</li>
+<li><strong>Lines (code):</strong> 600-628</li>
+</ul>
+</details>
+<h4 id="require-6" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/components/form-theme/#mixin-element-required-char">element-required-char()</a></li>
+<li><a href="/frontend/sass/components/form-theme/#mixin-element-help-text">element-help-text()</a></li>
+<li><a href="/frontend/sass/components/form-theme/#mixin-element-form-item-block">element-form-item-block()</a></li>
+<li><a href="/frontend/sass/components/form-theme/#mixin-element-form-actions">element-form-actions()</a></li>
+<li><a href="/frontend/sass/components/form-theme/#mixin-element-form-actions-right">element-form-actions-right()</a></li>
+</ul>
+<h2 id="functions" tabindex="-1">Functions</h2>
+<div class="sassdoc-item-header">
+<h3 id="function-get" tabindex="-1">get()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Function</strong></span>
+  </div>
+</div>
+<p>Get a config option</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _form-theme.scss</li>
+<li><strong>Group:</strong> form-theme</li>
+<li><strong>Type:</strong> function</li>
+<li><strong>Lines (comments):</strong> 204-207</li>
+<li><strong>Lines (code):</strong> 209-212</li>
+</ul>
+</details>
+<h4 id="examples-2" tabindex="-1">Examples</h4>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-form-theme-get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"property"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<h4 id="parameters-1" tabindex="-1">Parameters</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">$name</td>
+<td style="text-align:left"><code>Map</code></td>
+<td style="text-align:left">Name of property</td>
+</tr>
+</tbody>
+</table>
+<h4 id="require-7" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
+</ul>
+<h2 id="variables" tabindex="-1">Variables</h2>
+<div class="sassdoc-item-header">
+<h3 id="variable-config" tabindex="-1">$config</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
+  </div>
+</div>
+<p>Module Settings</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+  <span class="pjs-token pjs-string">"color"</span>                                     <span class="pjs-token pjs-punctuation">:</span> inherit<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"color-placeholder"</span>                         <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"type-tertiary"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"drupal"</span>                                    <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"error-color"</span>                               <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"danger"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"error-highlight-color"</span>                     <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>251<span class="pjs-token pjs-punctuation">,</span> 242<span class="pjs-token pjs-punctuation">,</span> 242<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"error-selector"</span>                            <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">".is-danger"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"file-button-style"</span>                         <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-weight-label"</span>                         <span class="pjs-token pjs-punctuation">:</span> bold<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-weight-legend"</span>                        <span class="pjs-token pjs-punctuation">:</span> bold<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-weight-placeholder"</span>                   <span class="pjs-token pjs-punctuation">:</span> normal<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-weight-input"</span>                         <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-weight-textarea"</span>                      <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-weight-select"</span>                        <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"input-border"</span>                              <span class="pjs-token pjs-punctuation">:</span> element.<span class="pjs-token pjs-function">get-rule-style</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"input-border-radius"</span>                       <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"item-margin-y"</span>                            <span class="pjs-token pjs-punctuation">:</span> 0.75em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"input-padding-x"</span>                           <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"input-padding-y"</span>                           <span class="pjs-token pjs-punctuation">:</span> 0.25em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"input-min-width"</span>                           <span class="pjs-token pjs-punctuation">:</span> 10em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"input-background-color"</span>                    <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"item-border-radius"</span>                        <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"item-highlight-width"</span>                      <span class="pjs-token pjs-punctuation">:</span> 6px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"required-color"</span>                            <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"danger"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"text-input-margin-bottom"</span>                  <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"text-input-margin-top"</span>                     <span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"warning-color"</span>                             <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"warning"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"warning-highlight-color"</span>                   <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>255<span class="pjs-token pjs-punctuation">,</span> 249<span class="pjs-token pjs-punctuation">,</span> 237<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"warning-selector"</span>                          <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">".is-warning"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-color"</span>                         <span class="pjs-token pjs-punctuation">:</span> currentColor<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-size"</span>                          <span class="pjs-token pjs-punctuation">:</span> 1.15em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-touch-size"</span>                    <span class="pjs-token pjs-punctuation">:</span> 2em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-background-color"</span>              <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-background-color-checked"</span>      <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-background-color-hover"</span>        <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-background-color-indeterminate"</span><span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-border"</span>                        <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-border-color-hover"</span>            <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-border-color-checked"</span>          <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-border-color-indeterminate"</span>    <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-border-color-focus"</span>            <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-outline"</span>                       <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-outline-hover"</span>                 <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-outline-checked"</span>               <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-outline-focus"</span>                 <span class="pjs-token pjs-punctuation">:</span> 1px solid white<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-touch-color-hover"</span>             <span class="pjs-token pjs-punctuation">:</span> #e8e8e8<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-touch-color-focus"</span>             <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-radio-size"</span>                    <span class="pjs-token pjs-punctuation">:</span> 0.3em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-checkmark-width"</span>               <span class="pjs-token pjs-punctuation">:</span> 0.38em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-checkmark-height"</span>              <span class="pjs-token pjs-punctuation">:</span> 0.68em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-checkmark-offset-y"</span>            <span class="pjs-token pjs-punctuation">:</span> -0.2em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-checkmark-stroke-size"</span>         <span class="pjs-token pjs-punctuation">:</span> 0.18em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-mark-color"</span>                    <span class="pjs-token pjs-punctuation">:</span> currentColor<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-mark-color-hover"</span>              <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-mark-color-focus"</span>              <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-mark-color-checked"</span>            <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-mark-color-indeterminate"</span>      <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-disabled-opacity"</span>              <span class="pjs-token pjs-punctuation">:</span> 0.6<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"check-input-border-radius"</span>                 <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"description-color"</span>                         <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"description-margin"</span>                        <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>0.25em 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"description-max-width"</span>                     <span class="pjs-token pjs-punctuation">:</span> 25em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"description-line-height"</span>                   <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"fieldset-background"</span>                       <span class="pjs-token pjs-punctuation">:</span> transparent<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"fieldset-border"</span>                           <span class="pjs-token pjs-punctuation">:</span> none<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"fieldset-margin-bottom"</span>                    <span class="pjs-token pjs-punctuation">:</span> 1rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"fieldset-margin-top"</span>                       <span class="pjs-token pjs-punctuation">:</span> 1rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"fieldset-padding"</span>                          <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"fieldset-margin-compact"</span>                   <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"fieldset-border-radius"</span>                    <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"fieldset-legend-color"</span>                     <span class="pjs-token pjs-punctuation">:</span> inherit<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"fieldset-legend-border-bottom"</span>             <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"fieldset-legend-padding-bottom"</span>            <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"fieldset-legend-margin-bottom"</span>             <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"select-border-radius"</span>                      <span class="pjs-token pjs-punctuation">:</span> 4px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"select-background-color"</span>                   <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"select-border"</span>                             <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"select-padding-x"</span>                          <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"select-padding-y"</span>                          <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"select-image"</span>                              <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"select-image-size"</span>                         <span class="pjs-token pjs-punctuation">:</span> 0.9em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"select-image-offset"</span>                       <span class="pjs-token pjs-punctuation">:</span> 0.7em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"select-image-margin"</span>                       <span class="pjs-token pjs-punctuation">:</span> 0.65em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"inline-gap"</span>                                <span class="pjs-token pjs-punctuation">:</span> 1em
+<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _form-theme.scss</li>
+<li><strong>Group:</strong> form-theme</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 25-107</li>
+<li><strong>Lines (code):</strong> 109-193</li>
+</ul>
+</details>
+<h4 id="map-properties" tabindex="-1">Map Properties</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Default</th>
+<th style="text-align:left">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">color</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">inherit</td>
+<td style="text-align:left">Color of the text of the form.</td>
+</tr>
+<tr>
+<td style="text-align:left">color-placeholder</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">&quot;type-tertiary&quot;</td>
+<td style="text-align:left">Color for the placeholder text.</td>
+</tr>
+<tr>
+<td style="text-align:left">drupal</td>
+<td style="text-align:left">Boolean</td>
+<td style="text-align:left">false</td>
+<td style="text-align:left">Toggle if using drupal to include drupal specific styling.</td>
+</tr>
+<tr>
+<td style="text-align:left">error-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">&quot;danger&quot;</td>
+<td style="text-align:left">Type color for errors.</td>
+</tr>
+<tr>
+<td style="text-align:left">error-highlight-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">rgb(251, 242, 242)</td>
+<td style="text-align:left">Outline color of error container.</td>
+</tr>
+<tr>
+<td style="text-align:left">error-selector</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">&quot;.is-danger&quot;</td>
+<td style="text-align:left">Class for error styling.</td>
+</tr>
+<tr>
+<td style="text-align:left">file-button-style</td>
+<td style="text-align:left">Map</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">@joe-check should this have a fallback</td>
+</tr>
+<tr>
+<td style="text-align:left">font-weight-label</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">bold</td>
+<td style="text-align:left">Font weight of the labels.</td>
+</tr>
+<tr>
+<td style="text-align:left">font-weight-legend</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">bold</td>
+<td style="text-align:left">Font weight of the legend.</td>
+</tr>
+<tr>
+<td style="text-align:left">font-weight-placeholder</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">normal</td>
+<td style="text-align:left">Font weight of placeholder text.</td>
+</tr>
+<tr>
+<td style="text-align:left">font-weight-input</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">null</td>
+<td style="text-align:left">Font weight of input text.</td>
+</tr>
+<tr>
+<td style="text-align:left">font-weight-textarea</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">null</td>
+<td style="text-align:left">Font weight of textarea text.</td>
+</tr>
+<tr>
+<td style="text-align:left">font-weight-select</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">null</td>
+<td style="text-align:left">Font weight of select text.</td>
+</tr>
+<tr>
+<td style="text-align:left">input-border</td>
+<td style="text-align:left">CssValue</td>
 <td style="text-align:left">element.get-rule-style()</td>
 <td style="text-align:left">Border of the input.</td>
 </tr>
@@ -5773,261 +6088,6 @@
 </tr>
 </tbody>
 </table>
-<h2 id="mixins" tabindex="-1">Mixins</h2>
-<div class="sassdoc-item-header">
-<h3 id="mixin-set" tabindex="-1">set()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Mixin</strong></span>
-  </div>
-</div>
-<p>Change modules $config</p>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _form-theme.scss</li>
-<li><strong>Group:</strong> form-theme</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 195-198</li>
-<li><strong>Lines (code):</strong> 200-202</li>
-</ul>
-</details>
-<h4 id="examples" tabindex="-1">Examples</h4>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-form-theme-set</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">(</span> <span class="pjs-token pjs-string">"property"</span> <span class="pjs-token pjs-punctuation">:</span> value <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
-<h4 id="parameters" tabindex="-1">Parameters</h4>
-<table>
-<thead>
-<tr>
-<th style="text-align:left">Name</th>
-<th style="text-align:left">Type</th>
-<th style="text-align:left">Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style="text-align:left">$changes</td>
-<td style="text-align:left"><code>Map</code></td>
-<td style="text-align:left">Map of changes</td>
-</tr>
-</tbody>
-</table>
-<h4 id="require" tabindex="-1">Require</h4>
-<ul>
-<li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
-</ul>
-<div class="sassdoc-item-header">
-<h3 id="mixin-styles" tabindex="-1">styles()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Mixin</strong></span>
-  </div>
-</div>
-<p>Output component stylesheet</p>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _form-theme.scss</li>
-<li><strong>Group:</strong> form-theme</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 218-220</li>
-<li><strong>Lines (code):</strong> 222-259</li>
-</ul>
-</details>
-<h4 id="examples-1" tabindex="-1">Examples</h4>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-form-theme-styles</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
-<h4 id="require-1" tabindex="-1">Require</h4>
-<ul>
-<li><a href="/frontend/sass/components/form-theme/#mixin-drupal-layout-element-styles">drupal-layout-element-styles()</a></li>
-<li><a href="/frontend/sass/components/form-theme/#mixin-layout-element-styles">layout-element-styles()</a></li>
-<li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
-</ul>
-<div class="sassdoc-item-header">
-<h3 id="mixin-element-required-char" tabindex="-1">element-required-char()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Mixin</strong></span>
-  </div>
-</div>
-<p>Required Character styles (ie. &quot;*&quot;)</p>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _form-theme.scss</li>
-<li><strong>Group:</strong> form-theme</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 498-498</li>
-<li><strong>Lines (code):</strong> 499-506</li>
-</ul>
-</details>
-<h4 id="require-2" tabindex="-1">Require</h4>
-<ul>
-<li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
-</ul>
-<div class="sassdoc-item-header">
-<h3 id="mixin-element-help-text" tabindex="-1">element-help-text()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Mixin</strong></span>
-  </div>
-</div>
-<p>Help text / Description</p>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _form-theme.scss</li>
-<li><strong>Group:</strong> form-theme</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 508-508</li>
-<li><strong>Lines (code):</strong> 509-516</li>
-</ul>
-</details>
-<h4 id="require-3" tabindex="-1">Require</h4>
-<ul>
-<li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
-</ul>
-<div class="sassdoc-item-header">
-<h3 id="mixin-element-form-item-block" tabindex="-1">element-form-item-block()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Mixin</strong></span>
-  </div>
-</div>
-<p>Styles for form item that should have label as block and text input</p>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _form-theme.scss</li>
-<li><strong>Group:</strong> form-theme</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 518-518</li>
-<li><strong>Lines (code):</strong> 519-530</li>
-</ul>
-</details>
-<h4 id="require-4" tabindex="-1">Require</h4>
-<ul>
-<li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
-</ul>
-<div class="sassdoc-item-header">
-<h3 id="mixin-element-form-actions" tabindex="-1">element-form-actions()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Mixin</strong></span>
-  </div>
-</div>
-<p>Footer of form (with button for example)</p>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _form-theme.scss</li>
-<li><strong>Group:</strong> form-theme</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 532-532</li>
-<li><strong>Lines (code):</strong> 533-536</li>
-</ul>
-</details>
-<div class="sassdoc-item-header">
-<h3 id="mixin-element-form-actions-right" tabindex="-1">element-form-actions-right()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Mixin</strong></span>
-  </div>
-</div>
-<p>Footer of form (with button for example)</p>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _form-theme.scss</li>
-<li><strong>Group:</strong> form-theme</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 538-538</li>
-<li><strong>Lines (code):</strong> 539-541</li>
-</ul>
-</details>
-<div class="sassdoc-item-header">
-<h3 id="mixin-layout-element-styles" tabindex="-1">layout-element-styles()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Mixin</strong></span>
-  </div>
-</div>
-<p>Layout styling for static/app sites</p>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _form-theme.scss</li>
-<li><strong>Group:</strong> form-theme</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 543-543</li>
-<li><strong>Lines (code):</strong> 544-597</li>
-</ul>
-</details>
-<h4 id="require-5" tabindex="-1">Require</h4>
-<ul>
-<li><a href="/frontend/sass/components/form-theme/#mixin-element-required-char">element-required-char()</a></li>
-<li><a href="/frontend/sass/components/form-theme/#mixin-element-help-text">element-help-text()</a></li>
-<li><a href="/frontend/sass/components/form-theme/#mixin-element-form-item-block">element-form-item-block()</a></li>
-<li><a href="/frontend/sass/components/form-theme/#mixin-element-form-actions">element-form-actions()</a></li>
-<li><a href="/frontend/sass/components/form-theme/#mixin-element-form-actions-right">element-form-actions-right()</a></li>
-<li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
-</ul>
-<div class="sassdoc-item-header">
-<h3 id="mixin-drupal-layout-element-styles" tabindex="-1">drupal-layout-element-styles()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Mixin</strong></span>
-  </div>
-</div>
-<p>Layout styles but using drupal form structures</p>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _form-theme.scss</li>
-<li><strong>Group:</strong> form-theme</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 599-599</li>
-<li><strong>Lines (code):</strong> 600-628</li>
-</ul>
-</details>
-<h4 id="require-6" tabindex="-1">Require</h4>
-<ul>
-<li><a href="/frontend/sass/components/form-theme/#mixin-element-required-char">element-required-char()</a></li>
-<li><a href="/frontend/sass/components/form-theme/#mixin-element-help-text">element-help-text()</a></li>
-<li><a href="/frontend/sass/components/form-theme/#mixin-element-form-item-block">element-form-item-block()</a></li>
-<li><a href="/frontend/sass/components/form-theme/#mixin-element-form-actions">element-form-actions()</a></li>
-<li><a href="/frontend/sass/components/form-theme/#mixin-element-form-actions-right">element-form-actions-right()</a></li>
-</ul>
-<h2 id="functions" tabindex="-1">Functions</h2>
-<div class="sassdoc-item-header">
-<h3 id="function-get" tabindex="-1">get()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Function</strong></span>
-  </div>
-</div>
-<p>Get a config option</p>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _form-theme.scss</li>
-<li><strong>Group:</strong> form-theme</li>
-<li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 204-207</li>
-<li><strong>Lines (code):</strong> 209-212</li>
-</ul>
-</details>
-<h4 id="examples-2" tabindex="-1">Examples</h4>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-form-theme-get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"property"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
-<h4 id="parameters-1" tabindex="-1">Parameters</h4>
-<table>
-<thead>
-<tr>
-<th style="text-align:left">Name</th>
-<th style="text-align:left">Type</th>
-<th style="text-align:left">Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style="text-align:left">$name</td>
-<td style="text-align:left"><code>Map</code></td>
-<td style="text-align:left">Name of property</td>
-</tr>
-</tbody>
-</table>
-<h4 id="require-7" tabindex="-1">Require</h4>
-<ul>
-<li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
-</ul>
 
     </div>
   </div>