@ulu/frontend 0.1.0-beta.10 → 0.1.0-beta.11

package/docs-dev/sass/core/color/index.html

@@ -4773,9 +4773,15 @@
   <span class="pjs-token pjs-string">"background"</span>              <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"background-gray"</span>         <span class="pjs-token pjs-punctuation">:</span> #F7F8F7<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"focus"</span>                   <span class="pjs-token pjs-punctuation">:</span> blue<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"error"</span>                   <span class="pjs-token pjs-punctuation">:</span> red<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"warning"</span>                 <span class="pjs-token pjs-punctuation">:</span> orange<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"accent"</span>                  <span class="pjs-token pjs-punctuation">:</span> orange<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"info"</span>                    <span class="pjs-token pjs-punctuation">:</span> #00bde3<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"success"</span>                 <span class="pjs-token pjs-punctuation">:</span> #00a91c<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"warning"</span>                 <span class="pjs-token pjs-punctuation">:</span> #ffbe2e<span class="pjs-token pjs-punctuation">,</span>  
+  <span class="pjs-token pjs-string">"danger"</span>                  <span class="pjs-token pjs-punctuation">:</span> #d54309<span class="pjs-token pjs-punctuation">,</span>  
+  <span class="pjs-token pjs-string">"info-background"</span>         <span class="pjs-token pjs-punctuation">:</span> #e7f6f8<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"success-background"</span>      <span class="pjs-token pjs-punctuation">:</span> #ecf3ec<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"warning-background"</span>      <span class="pjs-token pjs-punctuation">:</span> #faf3d1<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"danger-background"</span>       <span class="pjs-token pjs-punctuation">:</span> #f4e3db<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"selected"</span>                <span class="pjs-token pjs-punctuation">:</span> green<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"box-shadow"</span>              <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgba</span><span class="pjs-token pjs-punctuation">(</span>0<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">,</span> 0.349<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"box-shadow-hover"</span>        <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgba</span><span class="pjs-token pjs-punctuation">(</span>0<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">,</span> 0.5<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
@@ -4803,7 +4809,7 @@
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> variable</li>
 <li><strong>Lines (comments):</strong> 13-16</li>
-<li><strong>Lines (code):</strong> 18-50</li>
+<li><strong>Lines (code):</strong> 18-56</li>
 </ul>
 </details>
 <div class="sassdoc-item-header">
@@ -4831,8 +4837,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 52-56</li>
-<li><strong>Lines (code):</strong> 58-69</li>
+<li><strong>Lines (comments):</strong> 58-62</li>
+<li><strong>Lines (code):</strong> 64-75</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -4883,8 +4889,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 71-72</li>
-<li><strong>Lines (code):</strong> 73-77</li>
+<li><strong>Lines (comments):</strong> 77-78</li>
+<li><strong>Lines (code):</strong> 79-83</li>
 </ul>
 </details>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
@@ -4901,8 +4907,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 79-85</li>
-<li><strong>Lines (code):</strong> 87-89</li>
+<li><strong>Lines (comments):</strong> 85-91</li>
+<li><strong>Lines (code):</strong> 93-95</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -4945,8 +4951,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 111-112</li>
-<li><strong>Lines (code):</strong> 114-116</li>
+<li><strong>Lines (comments):</strong> 117-118</li>
+<li><strong>Lines (code):</strong> 120-122</li>
 </ul>
 </details>
 <h4 id="parameters-1" tabindex="-1">Parameters</h4>
@@ -4983,8 +4989,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 125-135</li>
-<li><strong>Lines (code):</strong> 137-139</li>
+<li><strong>Lines (comments):</strong> 131-141</li>
+<li><strong>Lines (code):</strong> 143-145</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5040,8 +5046,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 164-165</li>
-<li><strong>Lines (code):</strong> 167-173</li>
+<li><strong>Lines (comments):</strong> 170-171</li>
+<li><strong>Lines (code):</strong> 173-179</li>
 </ul>
 </details>
 <h4 id="parameters-3" tabindex="-1">Parameters</h4>
@@ -5080,8 +5086,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 197-204</li>
-<li><strong>Lines (code):</strong> 206-215</li>
+<li><strong>Lines (comments):</strong> 203-210</li>
+<li><strong>Lines (code):</strong> 212-221</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>
@@ -5133,8 +5139,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 217-221</li>
-<li><strong>Lines (code):</strong> 223-232</li>
+<li><strong>Lines (comments):</strong> 223-227</li>
+<li><strong>Lines (code):</strong> 229-238</li>
 </ul>
 </details>
 <h4 id="examples-3" tabindex="-1">Examples</h4>
@@ -5165,8 +5171,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 91-93</li>
-<li><strong>Lines (code):</strong> 95-109</li>
+<li><strong>Lines (comments):</strong> 97-99</li>
+<li><strong>Lines (code):</strong> 101-115</li>
 </ul>
 </details>
 <h4 id="parameters-5" tabindex="-1">Parameters</h4>
@@ -5219,8 +5225,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 118-118</li>
-<li><strong>Lines (code):</strong> 120-123</li>
+<li><strong>Lines (comments):</strong> 124-124</li>
+<li><strong>Lines (code):</strong> 126-129</li>
 </ul>
 </details>
 <h4 id="require-7" tabindex="-1">Require</h4>
@@ -5241,8 +5247,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 141-143</li>
-<li><strong>Lines (code):</strong> 145-147</li>
+<li><strong>Lines (comments):</strong> 147-149</li>
+<li><strong>Lines (code):</strong> 151-153</li>
 </ul>
 </details>
 <h4 id="parameters-6" tabindex="-1">Parameters</h4>
@@ -5293,8 +5299,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 149-152</li>
-<li><strong>Lines (code):</strong> 154-162</li>
+<li><strong>Lines (comments):</strong> 155-158</li>
+<li><strong>Lines (code):</strong> 160-168</li>
 </ul>
 </details>
 <h4 id="parameters-7" tabindex="-1">Parameters</h4>
@@ -5350,8 +5356,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 175-180</li>
-<li><strong>Lines (code):</strong> 182-184</li>
+<li><strong>Lines (comments):</strong> 181-186</li>
+<li><strong>Lines (code):</strong> 188-190</li>
 <li><strong>Author:</strong></li>
 </ul>
 </details>
@@ -5411,8 +5417,8 @@
 <li><strong>File:</strong> _color.scss</li>
 <li><strong>Group:</strong> color</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 186-191</li>
-<li><strong>Lines (code):</strong> 193-195</li>
+<li><strong>Lines (comments):</strong> 192-197</li>
+<li><strong>Lines (code):</strong> 199-201</li>
 <li><strong>Author:</strong> Kitty Giraudel</li>
 </ul>
 </details>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.10", 
+  "version": "0.1.0-beta.11", 
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/_color.scss

@@ -25,9 +25,15 @@ $palette: (
   "background"              : white,
   "background-gray"         : #F7F8F7,
   "focus"                   : blue,
-  "error"                   : red,
-  "warning"                 : orange,
   "accent"                  : orange,
+  "info"                    : #00bde3,
+  "success"                 : #00a91c,
+  "warning"                 : #ffbe2e,  
+  "danger"                  : #d54309,  
+  "info-background"         : #e7f6f8,
+  "success-background"      : #ecf3ec,
+  "warning-background"      : #faf3d1,
+  "danger-background"       : #f4e3db,
   "selected"                : green,
   "box-shadow"              : rgba(0, 0, 0, 0.349),
   "box-shadow-hover"        : rgba(0, 0, 0, 0.5),

package/scss/components/README.todos

@@ -13,3 +13,16 @@ Todos:
       * May override base styles
       * May contain layouts
       * May wrap or contain base (button vs button-group)
+
+Daniel Todos:
+  ☐ Remove uswds stylings for informative and emergency callouts and move it into soar's site
+    ☐ get rid of extra styles in frontend to clean up the left cap
+      ✔ add a dash to left-cap mixin (to make private) and remove documentation for that mixin @done
+      ✔ setup cap colors (define colors) @done
+      remove the width of the individual callout styles
+      remove background-dark, light, emergency styles
+    ☐ Reach out to Rachel about the bug with the theme toggle not working
+      ☐ ask her to recreate it
+  ☐ Setup search results page
+    ☐ General Node/Page Setup
+    ☐ Setup View

package/scss/components/_callout.scss

@@ -14,10 +14,6 @@
 
 // Used for function fallback
 $-fallbacks: (
-  "border" : (
-    "function" : meta.get-function("get-rule-style", false, "element"),
-    "property" : "light"
-  ),
   "border-radius" : (
     "function" : meta.get-function("get", false, "element"),
     "property" : "border-radius"
@@ -27,8 +23,9 @@ $-fallbacks: (
 /// Module Settings
 /// @type Map
 /// @prop {Color} background-color [rgb(240, 240, 240)] The background color of the Callout.
-/// @prop {Boolean} border [true] The border of the Callout.
+/// @prop {Color} border-color ["rule-light"] The border color of the Callout.
 /// @prop {Boolean} border-radius [true] The border radius of the Callout.
+/// @prop {Dimension} border-width [1px] The border width of the Callout.
 /// @prop {CssValue} box-shadow [none] The box-shadow of the Callout.
 /// @prop {Boolean} left-cap [false] Toggles the use of left caps in styled callouts.
 /// @prop {Color} left-cap-color [green] Color of the left cap.
@@ -38,58 +35,41 @@ $-fallbacks: (
 
 $config: (
   "background-color" : rgb(240, 240, 240),
-  "border" : true,
+  "border-color" : "rule-light",
   "border-radius" :  true,
+  "border-width" : 1px,
   "box-shadow" : none,
-  "left-cap" : false,
-  "left-cap-color" : green,
+  "left-cap" : true,
+  "left-cap-color" : rgb(160, 160, 160),
   "left-cap-width" : 0.5rem,
   "margin" : 2rem,
   "padding" : 1.5rem,
 ) !default;
 
 $styles: (
-  "background-dark" : (
-    "background-color" : rgb(240, 240, 240)
-  ),
   "outline" : (
     "background-color": transparent
   ),
-  "light" : (
-    "background-color" : white,
-    "border-color" : gray
-  ),
-  "informative" : (
-    "background-color" : #e7f6f8,
-    "left-cap-color" : #00bde3,
+  "info" : (
+    "background-color" : "info-background",
+    "left-cap-color" : "info",
     "left-cap" : true,
-    "left-cap-width": 0.5rem
   ),
   "warning" : (
-    "background-color" : #faf3d1,
-    "left-cap-color" : #ffbe2e,
+    "background-color" : "info-background",
+    "left-cap-color" : "info",
     "left-cap" : true,
-    "left-cap-width": 0.5rem
   ),
   "success" : (
-    "background-color" : #ecf3ec,
-    "left-cap-color" : #00a91c,
+    "background-color" : "success-background",
+    "left-cap-color" : "success",
     "left-cap" : true,
-    "left-cap-width": 0.5rem
   ),
   "danger" : (
-    "background-color" : #f4e3db,
-    "left-cap-color" : #d54309,
+    "background-color" : "danger-background",
+    "left-cap-color" : "danger",
     "left-cap" : true,
-    "left-cap-width": 0.5rem
   ),
-  "emergency" : (
-    "background-color" : #9c3d10,
-    "left-cap-color" : #9c3d10,
-    "left-cap" : true,
-    "color" : white,
-    "left-cap-width": 0.5rem
-  )
 ) !default;
 
 /// Change modules $config
@@ -119,22 +99,14 @@ $styles: (
   $styles: utils.map-merge($styles, $changes, $merge-mode) !global;
 }
 
-/// Output styling for a callout that adds a left cap
-/// @param {Dimension} $width The width of the left cap
-/// @param {Color} $color The left cap color
-
-@mixin left-cap($width: get("left-cap-width"), $color: get("left-cap-color")) {
+@mixin -left-cap($color: get("left-cap-color")) {
+  $left-padding: get-spacing-left(get("padding"));
   position: relative; 
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
+  padding-left: get("left-cap-width") + $left-padding;
   &::before {
-    position: absolute;
     content: "";
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: $width;
-    background-color: color.get($color);
   }
 }
 
@@ -144,19 +116,30 @@ $styles: (
 
 @mixin styles {
   $prefix: selector.class("callout");
-
+  
   #{ $prefix } {
     background-color: color.get(get("background-color"));
     padding: get("padding");
-    border: get("border");
+    border: get("border-width") solid color.get(get("border-color"));
     margin-bottom: get("margin");
     box-shadow: get("box-shadow");
     border-radius: get("border-radius");
     & >:first-child {
       margin-top: 0;
     }
+    &::before {
+      position: absolute;
+      left: 0 - get("border-width");
+      top: 0 - get("border-width");
+      bottom: 0 - get("border-width");
+      width: get("left-cap-width");
+      background-color: color.get(get("left-cap-color"));
+    }
     @if get("left-cap") {
-      @include left-cap();
+      @include -left-cap();
+      &::before {
+        content: "";
+      }
     }
   }
   @each $name, $style in $styles {
@@ -168,8 +151,13 @@ $styles: (
       border-color: color.get(map.get($style, "border-color")); 
       box-shadow: map.get($style, "box-shadow"); 
       padding: map.get($style, "padding"); 
+      &::before {
+        background-color: color.get(map.get($style, "left-cap-color"));
+      }
       @if map.get($style, "left-cap") {
-        @include left-cap( map.get($style, "left-cap-width"), map.get($style, "left-cap-color"));
+        @if not get("left-cap") {
+          @include -left-cap();
+        }
       }
     }
   }

package/scss/components/_card-grid.scss

@@ -51,7 +51,7 @@ $config: (
   
   #{ $prefix } {
     display: grid;
-    grid-template-columns:  get("template-columns");
+    grid-template-columns: get("template-columns");
     grid-auto-rows: 1fr;
     gap: get("gap");
     margin: get("gap") 0;

package/scss/components/_card.scss

@@ -19,7 +19,6 @@
 /// @prop {Dimension} padding [2rem] The padding for the image icon
 /// @prop {Dimension} margin-y [3rem] Top and bottom margin for the card.
 /// @prop {Dimension} border-radius [5rem] The border radius of the card.
-/// @prop {String} horizontal-breakpoint [small] The breakpoint used to change the card to vertical if using the card--horizontal styling. Uses ulu's breakpoint module.
 /// @prop {CssValue} box-shadow [null] The box-shadow for the card.
 /// @prop {CssValue} box-shadow-hover [null] The box-shadow for the card when hovered or focused.
 /// @prop {Color} color [null] The type color of the card.
@@ -58,8 +57,10 @@
 /// @prop {Boolean} image-transition-enabled [true] Enable or disable the image transition.
 /// @prop {Time} image-transition-duration [350ms] The duration of the image transition.
 /// @prop {CssValue} image-transition-timing-function [ease-in-out] The timing function for the image transition.
+/// @prop {List} image-icon-max-width [30rem] Max width for image when using the modifier on the .card__image--icon
 /// @prop {List} image-transition-properties [(transform, filter)] The properties for the image transitions.
-
+/// @prop {String} horizontal-breakpoint [small] The breakpoint used to change the card to vertical if using the card--horizontal styling. Uses ulu's breakpoint module.
+/// @prop {Unit} horizontal-body-max-width [80rem] The max-width of body when horizontal
 
 
 $config: (
@@ -79,6 +80,8 @@ $config: (
   "footer-padding-y" : 0.25rem,
   "footer-min-height" : 2.5rem,
   "horizontal-breakpoint" : "small",
+  "horizontal-image-width" : 33%,
+  "horizontal-body-max-width" : 80rem,
   "header-margin" : 0.75em,
   "image-ratio" : 56.25%,
   "image-aspect-ratio": list.slash(5, 3),
@@ -86,6 +89,7 @@ $config: (
   "image-border" : null, // For when you have a margin
   "image-filter-hover" : null,
   "image-margin" : null,
+  "image-icon-max-width" : 30rem,
   "image-transform-hover" : null,
   "image-transition-duration" :    350ms,
   "image-transition-enabled" : true,
@@ -110,7 +114,7 @@ $config: (
   "overlay-background-color": rgba(0, 0, 0, 0.6),
   "overlay-shading": true,
   "overlay-body-padding-y": 1rem,
-  ) !default;
+) !default;
   
   /// Change modules $config
 /// @param {Map} $changes Map of changes
@@ -182,7 +186,7 @@ $config: (
     // Border is on pseudo so that it's on top of image/etc
     &:after {
       position: absolute;
-      content: if(get("border"), "", false);
+      content: if(get("border"), "", null);
       top: 0; 
       bottom: 0; 
       right: 0; 
@@ -300,7 +304,7 @@ $config: (
     img {
       position: static;
       display: block;
-      max-width: 30rem;
+      max-width: get("image-icon-max-width");
       height: auto;
       top: auto;
       left: auto;
@@ -414,8 +418,8 @@ $config: (
         justify-content: center;
         align-items: center;
         #{ $prefix }__image {
-          width: 33%;
-          flex: 0 1 33%;
+          width: get("horizontal-image-width");
+          flex: 0 1 get("horizontal-image-width");
           // max-width: 30rem;
           min-height: 28rem;
           // padding-top: 0;
@@ -425,7 +429,7 @@ $config: (
           flex: 1;
           flex-direction: column;
           justify-content: center;
-          max-width: 80rem;
+          max-width: get("horizontal-body-max-width");
         }
       }
     }

package/scss/components/_data-table.scss

@@ -30,10 +30,11 @@ $config: (
   "text-align" : left,
   "type-size" : "small",
   "background-color" : white,
-  "header-background-color" : #eeeeee,
+  "header-background-color" : #f5f4f4,
   "body-background-color" : white,
   "footer-background-color" : #f3f3f3,
   "color" : "type-secondary",
+  "header-color" : "headline",
   "line-height" : true,
   "column-min-width" : 6em,
   "first-column-large-min-width" : 15em,
@@ -48,8 +49,9 @@ $config: (
   "caption-type-size" : "large",
   "caption-background-color" : null,
   "caption-font-weight" : bold,
+  "caption-border-bottom" : null,
   "caption-margin" : (0,),
-  "caption-padding" : (0.5em,),
+  "caption-padding" : (0.65em 0),
   "caption-text-align" : left,
   "extra-selector" : ".wysiwyg table"
 ) !default;
@@ -113,7 +115,7 @@ $config: (
       margin: get("caption-margin");
       padding: get("caption-padding");
       background-color: get("caption-background-color");
-      border-bottom: $border;
+      border-bottom: get("caption-border-bottom");
     }
     th,
     tr,
@@ -137,6 +139,9 @@ $config: (
     thead tr {
       background-color: color.get(get("header-background-color"));
     }
+    thead th {
+      color: color.get(get("header-color"));
+    }
     tbody tr {
       background-color: color.get(get("body-background-color"));
     }

package/scss/components/_form-theme.scss

@@ -18,7 +18,7 @@
 /// @prop {} color [inherit]
 /// @prop {} color-placeholder ["type-tertiary"]
 /// @prop {} drupal [false]
-/// @prop {} error-color ["error"]
+/// @prop {} error-color ["danger"]
 /// @prop {} error-highlight-color [rgb(251, 242, 242)]
 /// @prop {} error-selector [".is-danger"]
 /// @prop {} file-button-style [true]
@@ -37,7 +37,7 @@
 /// @prop {} input-background-color [white]
 /// @prop {} item-border-radius [null]
 /// @prop {} item-highlight-width [6px]
-/// @prop {} required-color ["error"]
+/// @prop {} required-color ["danger"]
 /// @prop {} text-input-margin-bottom [0.5em]
 /// @prop {} text-input-margin-top [1em]
 /// @prop {} warning-color ["warning"]
@@ -82,9 +82,11 @@
 /// @prop {} fieldset-margin-top [1rem]
 /// @prop {} fieldset-padding [0]
 /// @prop {} fieldset-margin-compact [0]
+/// @prop {} fieldset-border-bottom [0]
 /// @prop {} fieldset-border-radius [0]
 /// @prop {} fieldset-legend-color [inherit]
 /// @prop {} fieldset-legend-border-bottom [null]
+/// @prop {} fieldset-legend-padding-bottom [null]
 /// @prop {} select-border-radius [4px]
 /// @prop {} select-background-color [null]
 /// @prop {} select-border [null]
@@ -94,12 +96,13 @@
 /// @prop {} select-image-size [0.9em]
 /// @prop {} select-image-offset [0.7em]
 /// @prop {} select-image-margin [0.65em]
+/// @prop {Unit} inline-gap [1em] Gap between items that are inline like checkboxes
 
 $config: (
   "color"                                     : inherit,
   "color-placeholder"                         : "type-tertiary",
   "drupal"                                    : false,
-  "error-color"                               : "error",
+  "error-color"                               : "danger",
   "error-highlight-color"                     : rgb(251, 242, 242),
   "error-selector"                            : ".is-danger",
   "file-button-style"                         : true,
@@ -111,14 +114,14 @@ $config: (
   "font-weight-select"                        : null,
   "input-border"                              : element.get-rule-style(),
   "input-border-radius"                       : 0,
-  "input-margin-y"                            : 0.75em,
+  "item-margin-y"                            : 0.75em,
   "input-padding-x"                           : 0.5em,
   "input-padding-y"                           : 0.25em,
   "input-min-width"                           : 10em,
   "input-background-color"                    : white,
   "item-border-radius"                        : null,
   "item-highlight-width"                      : 6px,
-  "required-color"                            : "error",
+  "required-color"                            : "danger",
   "text-input-margin-bottom"                  : 0.5em,
   "text-input-margin-top"                     : 1em,
   "warning-color"                             : "warning",
@@ -166,6 +169,8 @@ $config: (
   "fieldset-border-radius"                    : 0,
   "fieldset-legend-color"                     : inherit,
   "fieldset-legend-border-bottom"             : null,
+  "fieldset-legend-padding-bottom"            : 0,
+  "fieldset-legend-margin-bottom"             : 0.5em,
   "select-border-radius"                      : 4px,
   "select-background-color"                   : null,
   "select-border"                             : null,
@@ -175,6 +180,7 @@ $config: (
   "select-image-size"                         : 0.9em,
   "select-image-offset"                       : 0.7em,
   "select-image-margin"                       : 0.65em,
+  "inline-gap"                                : 1em
 ) !default;
 
 /// Change modules $config
@@ -305,7 +311,6 @@ $config: (
   }
   select {
     font-weight: get("font-weight-select");
-    border: get("select-border");
     border-radius: get("select-border-radius");
     background-color: color.get(get("select-background-color"));
     padding: -fallback("select-padding-y", "input-padding-y") -fallback("select-padding-x", "input-padding-x");
@@ -456,19 +461,13 @@ $config: (
     > legend {
       font-weight: get("font-weight-legend");
       display: block;
-      margin: 0 0 0.5em 0;
+      margin: 0 0 get("fieldset-legend-margin-bottom") 0;
       border: 0;
-      padding: 0;
+      padding: 0 0 get("fieldset-legend-padding-bottom") 0;
       width: 100%;
       float: left;
-      > span {
-        display: block;
-        margin-bottom: 1rem;
-        padding-bottom: 0.5em;
-        padding-top: 0.5em;
-        border-bottom: get("fieldset-legend-border-bottom");
-        color: color.get(get("fieldset-legend-color"));
-      }
+      border-bottom: get("fieldset-legend-border-bottom");
+      color: color.get(get("fieldset-legend-color"));
       & ~ * {
         clear: left;
       }
@@ -547,7 +546,7 @@ $config: (
   #{ $prefix }__item {
     display: flex;
     align-items: center;
-    margin-bottom: get("input-margin-y");
+    margin-bottom: get("item-margin-y");
     border-radius: get("item-border-radius");
     flex-shrink: 0; // Cannot be smaller than content within
     @include -form-item-state($selectError, $errorColor, color.get(get("error-highlight-color")));
@@ -565,8 +564,9 @@ $config: (
   #{ $prefix }__items-inline {
     display: flex;
     flex-wrap: wrap;
+    gap: get("inline-gap");
     > #{ $prefix }__item {
-      margin-right: 1.5em;
+      margin: 0;
     }
   }
   #{ $prefix }__actions {