@deque/cauldron-styles 2.0.0 → 3.0.1-canary.00f53b54

package/dist/index.css

@@ -34,7 +34,7 @@
   --accent-secondary: var(--gray-20);
   --accent-secondary-active: var(--gray-30);
   --focus-light: #c11bde;
-  --focus-dark: #e267ff;
+  --focus-dark: #eb94ff;
 
   /* text colours */
   --text-color-base: var(--gray-60);
@@ -46,7 +46,7 @@
   /* accents */
   --error: var(--accent-error);
   --disabled: var(--gray-40);
-  --focus: #d71ef7;
+  --focus: var(--focus-light);
   --warning: var(--accent-caution);
   --error-alt: var(--accent-warning-light);
   --info: var(--accent-info-light);
@@ -101,6 +101,7 @@
   --z-index-dialog: 21;
   --z-index-dialog-scrim: 20;
   --z-index-scrim-action-needed: 23;
+  --z-index-top-nav: 9;
   --z-index-side-bar: 9;
   --z-index-toast: 8;
   --z-index-toast-action-needed: 24;
@@ -111,12 +112,21 @@
   --z-index-skip-container: calc(var(--z-index-top-bar) + 1);
 }
 
+.cauldron--theme-dark {
+  --focus: var(--focus-dark);
+}
+
 :root {
   --workspace-background-color: #f0f2f5;
 }
 
 .cauldron--theme-dark {
   --workspace-background-color: var(--dark-workspace-color);
+  color-scheme: dark;
+}
+
+.cauldron--theme-light {
+  color-scheme: light;
 }
 
 html {
@@ -157,7 +167,8 @@ h4,
 h5,
 h6,
 [role='heading'] {
-  color: var(--header-text-color-dark);
+  --heading-text-color: var(--header-text-color-dark);
+  color: var(--heading-text-color);
 }
 
 ul {
@@ -189,12 +200,22 @@ p {
   line-height: 1.618;
 }
 
+.cauldron--theme-dark h1,
+.cauldron--theme-dark h2,
+.cauldron--theme-dark h3,
+.cauldron--theme-dark h4,
+.cauldron--theme-dark h5,
+.cauldron--theme-dark h6,
+.cauldron--theme-dark [role='heading'] {
+  --heading-text-color: white;
+}
+
 .Layout {
   top: var(--top-bar-height);
   padding: var(--layout-padding) var(--layout-padding) 0 var(--layout-padding);
   position: fixed;
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   right: 0;
   bottom: 0;
@@ -214,7 +235,7 @@ p {
 
 .Layout .Main:focus {
   outline: 0;
-  border-left-color: var(--top-bar-background-color);
+  border-left-color: var(--gray-90);
 }
 
 /* the left-bar style focus indication */
@@ -278,6 +299,10 @@ p {
   color: var(--white);
 }
 
+.cauldron--theme-dark .Layout .Main:focus {
+  border-left-color: var(--white);
+}
+
 :root {
   --alert-warning-background-color: #d93251;
   --alert-warning-header-text-color: #fff;
@@ -405,7 +430,7 @@ button.Link {
 .Button--primary:focus:before,
 .Button--secondary:focus:before,
 .Button--error:focus:before {
-  box-shadow: 0 0 1px 2px var(--button-focus-ring-color);
+  box-shadow: 0 0 1px 2px var(--button-focus-ring-color, --focus);
 }
 
 .Button--primary {
@@ -426,7 +451,6 @@ button.Link {
   background-color: var(--button-background-color-secondary);
   color: var(--button-text-color-dark);
   border: 1px solid var(--field-border-color);
-  --button-hover-outline-color: var(--header-text-color-dark);
 }
 
 .Button--secondary[aria-disabled='true'],
@@ -509,15 +533,12 @@ button.Link {
   --button-background-color-secondary: var(--accent-medium);
   --button-background-color-secondary-disabled: var(--accent-medium);
   --button-background-color-error-disabled: var(--accent-medium);
-  --header-text-color-dark: var(--white);
 
   --button-background-color-primary-active: #a7e9f7;
   --button-background-color-secondary-active: var(--accent-light);
   --button-background-color-error-active: #fea7a6;
 
   --button-focus-ring-color: var(--focus-dark);
-
-  --header-text-color-dark: var(--white);
   --field-label-text-color: var(--accent-light);
   --field-border-color-error: var(--accent-danger);
   --error: var(--accent-danger);
@@ -690,7 +711,7 @@ button.Link {
 }
 
 .IconButton:focus:before {
-  box-shadow: 0 0 1px 2px var(--button-focus-ring-color);
+  box-shadow: 0 0 1px 2px var(--button-focus-ring-color, --focus);
 }
 
 .IconButton--primary {
@@ -768,6 +789,7 @@ button.Link {
 
 .cauldron--theme-dark .IconButton--error {
   background-color: var(--accent-danger);
+  color: var(--accent-dark);
 }
 
 .cauldron--theme-dark .IconButton--primary:active {
@@ -875,7 +897,7 @@ button.Link {
 }
 
 .Dialog__content {
-  padding: calc(var(--space-small) - 4px) var(--dialog-padding);
+  padding: var(--dialog-padding);
 }
 
 .Dialog__content p:first-child {
@@ -927,6 +949,7 @@ button.Link {
   display: flex;
   justify-content: center;
   border-top: none;
+  padding-top: 0;
 }
 
 /* Dark Theme */
@@ -934,15 +957,15 @@ button.Link {
 .cauldron--theme-dark .Dialog__inner {
   background-color: var(--accent-medium);
   color: var(--white);
-  border: 1px solid var(--gray-70);
+  border: 4px solid var(--gray-20);
 }
 
 .cauldron--theme-dark .Dialog__header {
-  border-bottom: 1px solid var(--gray-70);
+  border-bottom: 1px solid #5d676f;
 }
 
 .cauldron--theme-dark .Dialog__footer {
-  border-top: 1px solid var(--gray-70);
+  border-top: 1px solid #5d676f;
 }
 
 .cauldron--theme-dark .Dialog__header,
@@ -958,7 +981,7 @@ button.Link {
 .cauldron--theme-dark .Dialog__heading:focus,
 .cauldron--theme-dark .Dialog__close:focus,
 .cauldron--theme-dark .Dialog__close:hover {
-  border-bottom-color: #fff;
+  border-bottom-color: var(--white);
 }
 
 .cauldron--theme-dark .Modal--info .Dialog__header,
@@ -1017,7 +1040,7 @@ button.Link {
 }
 
 .TopBar .Dropdown {
-  top: 42px;
+  top: var(--top-bar-height);
   right: 0;
 }
 
@@ -1403,22 +1426,38 @@ ul.semantic-only {
 }
 
 :root {
+  --field-background-color: var(--white);
+  --field-content-color: var(--text-color-base);
   --field-border-color: var(--gray-40);
   --field-border-color-underline: var(--gray-80);
-  --field-border-color-hover: var(--gray-80);
+  --field-border-color-hover: var(--gray-90);
   --field-border-color-focus: var(--accent-primary);
+  --field-border-color-focus-hover: var(--accent-primary-active);
   --field-border-color-focus-glow: rgba(60, 122, 174, 0.7);
   --field-border-color-error: var(--accent-error);
   --field-border-color-error-hover: #c42f41;
   --field-border-color-error-focus-glow: rgba(217, 50, 81, 0.7);
   --field-border-color-disabled: rgba(204, 204, 204, 0.25);
-  --field-border-color-disabled: rgba(204, 204, 204, 0.25);
   --field-background-color-disabled: #f7f7f7;
   --field-required-text-color: var(--gray-60);
   --field-label-text-color: var(--gray-90);
   --input-min-width: 250px;
 }
 
+.cauldron--theme-dark {
+  --field-background-color: var(--accent-medium);
+  --field-content-color: var(--white);
+  --field-border-color-hover: var(--accent-info-light);
+  --field-border-color-focus: var(--accent-info);
+  --field-border-color-focus-hover: var(--accent-info-light);
+  --field-border-color-focus-glow: var(--accent-info);
+  --field-border-color-error: var(--accent-danger);
+  --field-border-color-error-hover: #fea7a6;
+  --field-background-color-disabled: #5d676f;
+  --field-required-text-color: var(--white);
+  --field-label-text-color: var(--white);
+}
+
 input,
 select,
 textarea,
@@ -1433,6 +1472,19 @@ textarea,
   border-bottom: 1px solid var(--field-border-color-underline);
   margin-bottom: var(--space-half);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+  background-color: var(--field-background-color);
+}
+
+.cauldron--theme-dark input,
+select,
+textarea,
+[role='menuitemcheckbox'],
+[role='menuitemradio'],
+[role='textbox'],
+[aria-haspopup='listbox'],
+[role='listbox'],
+[role='spinbutton'] {
+  border: 1px solid var(--field-border-color);
 }
 
 input:focus,
@@ -1445,9 +1497,9 @@ textarea:focus,
 [role='listbox']:focus,
 [role='spinbutton']:focus {
   outline: 0;
-  border: 1px solid var(--field-border-color-focus);
-  box-shadow: inset 0 0 0 1px var(--field-border-color-focus),
-    0px 0px 4px var(--field-border-color-focus-glow);
+  border: 2px solid var(--field-border-color-focus);
+  box-shadow: 0px 0px 4px var(--field-border-color-focus-glow),
+    inset 0px 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 input:hover,
@@ -1462,6 +1514,18 @@ textarea:hover,
   border: 1px solid var(--field-border-color-hover);
 }
 
+input:focus:hover,
+select:focus:hover,
+textarea:focus:hover,
+[role='menuitemcheckbox']:focus:hover,
+[role='menuitemradio']:focus:hover,
+[role='textbox']:focus:hover,
+[aria-haspopup='listbox']:focus:hover,
+[role='listbox']:focus:hover,
+[role='spinbutton']:focus:hover {
+  border: 2px solid var(--field-border-color-focus-hover);
+}
+
 input.Field--has-error,
 select.Field--has-error,
 textarea.Field--has-error,
@@ -1478,6 +1542,18 @@ textarea.Field--has-error,
   color: var(--field-border-color-error);
 }
 
+input.Field--has-error:hover,
+select.Field--has-error:hover,
+textarea.Field--has-error:hover,
+[role='menuitemcheckbox'].Field--has-error:hover,
+[role='menuitemradio'].Field--has-error:hover,
+[role='textbox'].Field--has-error:hover,
+[aria-haspopup='listbox'].Field--has-error:hover,
+[role='listbox'].Field--has-error:hover,
+[role='spinbutton'].Field--has-error:hover {
+  border-color: var(--field-border-color-error-hover);
+}
+
 input.Field--has-error:focus,
 select.Field--has-error:focus,
 textarea.Field--has-error:focus,
@@ -1487,15 +1563,27 @@ textarea.Field--has-error:focus,
 [aria-haspopup='listbox'].Field--has-error:focus,
 [role='listbox'].Field--has-error:focus,
 [role='spinbutton'].Field--has-error:focus {
-  box-shadow: inset 0 0 0 1px var(--field-border-color-error),
-    0px 0px 4px 0 var(--field-border-color-error-focus-glow);
+  border: 2px solid var(--field-border-color-error);
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px inset,
+    var(--field-border-color-error-focus-glow) 0px 0px 4px 0px;
+}
+
+input.Field--has-error:focus:hover,
+select.Field--has-error:focus:hover,
+textarea.Field--has-error:focus:hover,
+[role='menuitemcheckbox'].Field--has-error:focus:hover,
+[role='menuitemradio'].Field--has-error:focus:hover,
+[role='textbox'].Field--has-error:focus:hover,
+[aria-haspopup='listbox'].Field--has-error:focus:hover,
+[role='listbox'].Field--has-error:focus:hover,
+[role='spinbutton'].Field--has-error:focus:hover {
+  border-color: var(--field-border-color-error-hover);
 }
 
 .Error {
   min-height: var(--space-large);
   color: var(--error);
   text-align: left;
-  margin-bottom: var(--space-smallest);
   font-size: var(--text-size-smallest);
   font-weight: var(--font-weight-normal);
   padding-left: var(--space-half);
@@ -1505,6 +1593,7 @@ textarea.Field--has-error:focus,
   display: block;
   position: relative;
   box-sizing: border-box;
+  margin-bottom: var(--space-smallest);
 }
 
 .Field.is--flex-row {
@@ -1520,6 +1609,17 @@ textarea.Field--has-error:focus,
   box-sizing: border-box;
   position: relative;
   margin-bottom: 0;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
+.Checkbox {
+  margin-bottom: var(--space-smallest);
+}
+
+.Checkbox + .Checkbox,
+.Radio + .Radio {
+  margin-top: var(--space-smallest);
 }
 
 .Checkbox .Field__label,
@@ -1539,10 +1639,6 @@ textarea.Field--has-error:focus,
   cursor: default;
 }
 
-.Field__label.Field__label--disabled {
-  color: var(--disabled);
-}
-
 .Field__required-text {
   flex: 1;
   text-align: right;
@@ -1555,7 +1651,7 @@ textarea.Field--has-error:focus,
 
 .Field__required-text::before {
   content: ' ';
-  color: var(--text-color-base);
+  color: var(--field-content-color);
 }
 
 .Field__label--has-error .Field__required-text {
@@ -1572,7 +1668,7 @@ textarea.Field--has-error:focus,
   padding: var(--space-smallest);
   box-sizing: border-box;
   font-size: var(--text-size-small);
-  color: var(--text-color-base);
+  color: var(--field-content-color);
   min-width: var(--input-min-width);
 }
 
@@ -1589,6 +1685,7 @@ textarea.Field--has-error:focus,
   min-width: var(--input-min-width);
   padding: var(--space-half);
   max-width: 500px;
+  color: var(--field-content-color);
 }
 
 .Field__textarea[disabled],
@@ -1629,6 +1726,7 @@ textarea.Field--has-error:focus,
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  border: 0;
 }
 
 .Checkbox__overlay.Checkbox__overlay--focused,
@@ -1646,6 +1744,7 @@ textarea.Field--has-error:focus,
   color: #ccc;
 }
 
+.Field__label:hover ~ .Radio__overlay:not(.Radio__overlay--disabled),
 .Radio__overlay:hover:not(.Radio__overlay--disabled) {
   border: 1px solid currentColor;
 }
@@ -1659,6 +1758,7 @@ textarea.Field--has-error:focus,
      -moz-appearance: none;
           appearance: none;
   width: 2px;
+  border: 0;
 }
 
 .Checkbox__overlay.Icon--checkbox-checked {
@@ -1670,17 +1770,49 @@ textarea.Field--has-error:focus,
   color: #ccc;
 }
 
+.Field__label:hover ~ .Checkbox__overlay:not(.Checkbox__overlay--disabled),
 .Checkbox__overlay:hover:not(.Checkbox__overlay--disabled) {
   border: 1px solid currentColor;
 }
 
+/* Dark Theme */
+
+.cauldron--theme-dark {
+  --field-label-text-color: var(--white);
+}
+
+.cauldron--theme-dark .Radio__overlay,
+.cauldron--theme-dark .Checkbox__overlay {
+  color: var(--white);
+}
+
+.cauldron--theme-dark .Checkbox__overlay.Icon--checkbox-checked {
+  color: var(--accent-light);
+}
+
+.cauldron--theme-dark .Checkbox__overlay.Field--has-error {
+  color: var(--accent-danger);
+}
+
+.cauldron--theme-dark .Radio__overlay--disabled,
+.cauldron--theme-dark .Checkbox__overlay--disabled.Icon--checkbox-checked,
+.cauldron--theme-dark .Checkbox__overlay--disabled.Icon--checkbox-unchecked {
+  color: #4c99a9;
+}
+
 :root {
-  --link-text-color: var(--accent-primary);
+  --link-text-color: var(--gray-90);
+  --link-text-color-hover: var(--accent-primary);
   --link-text-color-light: rgba(60, 122, 174, 0.1);
 }
 
+.cauldron--theme-dark {
+  --link-text-color: var(--white);
+  --link-text-color-hover: var(--accent-light);
+}
+
 .Link {
-  text-decoration: none;
+  text-decoration: underline;
   color: var(--link-text-color);
   font-weight: var(--font-weight-medium);
   display: inline-block;
@@ -1703,7 +1835,7 @@ p .Link {
   margin: 0 2px;
   display: inline;
   text-decoration: underline;
-  color: var(--header-text-color-dark);
+  color: var(--gray-90);
   font-weight: var(--font-weight-normal);
 }
 
@@ -1715,7 +1847,7 @@ p .Link {
 
 .OptionsMenu__trigger {
   font-size: var(--text-small-medium);
-  color: var(--header-text-color-dark);
+  color: var(--gray-90);
   border-radius: 3px;
   background-color: var(--white);
   border: 1px solid var(--field-border-color);
@@ -1833,10 +1965,11 @@ p .Link {
 .Field__select {
   display: flex;
   flex-direction: column;
+  margin-bottom: var(--space-smallest);
 }
 
 .Field__select--disabled {
-  opacity: 0.45;
+  opacity: 0.65;
 }
 
 .Field__select--wrapper {
@@ -1852,7 +1985,7 @@ p .Link {
   right: var(--select-arrow-spacing);
   border-left: var(--space-half) solid transparent;
   border-right: var(--space-half) solid transparent;
-  border-top: var(--space-three-quarters) solid #6a6a6a;
+  border-top: var(--space-three-quarters) solid var(--field-content-color);
   pointer-events: none;
 }
 
@@ -1865,24 +1998,28 @@ p .Link {
   font-weight: normal;
   font-style: normal;
   font-size: var(--text-size-small);
-  color: var(--text-color-base);
+  color: var(--field-content-color);
   -webkit-text-decoration: rgb(102, 102, 102);
           text-decoration: rgb(102, 102, 102);
-  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.05);
-  background: transparent;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
 }
 
 .Field__select--wrapper select:not([disabled]):hover {
-  border-color: var(--gray-90);
+  border-color: var(--field-border-color-hover);
 }
 
 .Field__select--wrapper select:focus {
-  border-color: rgb(60, 122, 174);
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px inset,
-    rgba(60, 122, 174, 0.7) 0px 0px 4px 0px;
+  border-color: var(--field-border-color-focus);
+  box-shadow: 0 0 0 1px var(--field-border-color-focus),
+    0 0 5px var(--field-border-color-focus-glow),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.Field__select--wrapper select:focus:hover {
+  border-color: var(--field-border-color-focus-hover);
 }
 
 .Field__select--wrapper select:invalid,
@@ -1891,13 +2028,21 @@ p .Link {
   border-color: var(--field-border-color-error);
 }
 
-.Field__select--wrapper select:invalid:focus,
-.Field__select--wrapper.Field--has-error select:focus,
 .Field__select--wrapper.Field--has-error select:hover {
+  border-color: var(--field-border-color-error-hover);
+}
+
+.Field__select--wrapper select:invalid:focus,
+.Field__select--wrapper.Field--has-error select:focus {
   border-width: var(--space-quarter);
   border-color: var(--field-border-color-error);
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px inset,
-    rgba(217, 50, 81, 0.7) 0px 0px 4px 0px;
+  box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0 inset,
+    var(--field-border-color-error-focus-glow) 0 0 4px 0;
+}
+
+.Field__select--wrapper select:invalid:focus:hover,
+.Field__select--wrapper.Field--has-error select:focus:hover {
+  border-color: var(--field-border-color-error-hover);
 }
 
 :root {
@@ -1940,14 +2085,15 @@ p .Link {
   border-left: var(--border-width) solid transparent;
 }
 
-.SideBar li:not([aria-controls]):hover,
+.SideBar li:not([aria-controls]):not(.MenuItem--active):hover,
 .SideBar li:not([aria-controls]):focus-within {
   outline: 0;
-  border-left: var(--border-width) solid var(--top-bar-text-color);
+  background-color: var(--gray-20);
 }
 
 .SideBar li:not([aria-controls]).MenuItem--active {
   border-left: var(--border-width) solid var(--accent-primary);
+  background-color: var(--white);
 }
 
 .SideBar li:not([aria-controls]).MenuItem--active a {
@@ -2008,6 +2154,7 @@ p .Link {
 
 .cauldron--theme-dark .SideBar li:not([aria-controls]).MenuItem--active {
   border-left: var(--border-width) solid var(--accent-info);
+  background-color: var(--accent-medium);
 }
 
 .cauldron--theme-dark .SideBar li:not([aria-controls]).MenuItem--active a {
@@ -2015,6 +2162,13 @@ p .Link {
   font-weight: var(--font-weight-medium);
 }
 
+.cauldron--theme-dark
+  .SideBar
+  li:not([aria-controls]):not(.MenuItem--active):hover,
+.cauldron--theme-dark .SideBar li:not([aria-controls]):focus-within {
+  background-color: var(--accent-dark);
+}
+
 :root {
   --tile-background-color: var(--white);
   --list-separator: rgba(153, 153, 153, 0.15);
@@ -2025,6 +2179,19 @@ p .Link {
   max-width: 476px;
 }
 
+.Card--simple {
+  max-width: 267px;
+  border: 1px solid var(--gray-40);
+  border-radius: 3px;
+  background-color: var(--tile-background-color);
+  color: var(--heading-text-color);
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
+}
+
+.cauldron--theme-dark .Card--simple {
+  background-color: var(--dark-workspace-color);
+}
+
 .Card__header {
   color: var(--tile-background-color);
   background-color: var(--top-bar-background-color);
@@ -2032,6 +2199,13 @@ p .Link {
     var(--space-three-quarters) var(--space-large);
 }
 
+.Card--simple .Card__header {
+  border-bottom: 1px solid var(--gray-40);
+  padding: var(--space-small);
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
 .Card__header h2,
 .Card__header h3,
 .Card__header h4,
@@ -2039,10 +2213,20 @@ p .Link {
 .Card__header h6 {
   font-size: var(--text-small-medium);
   font-weight: var(--font-weight-light);
-  color: var(--tile-background-color);
+  color: var(--heading-text-color);
   margin: 0;
 }
 
+.Card--simple .Card__header h2,
+.Card--simple .Card__header h3,
+.Card--simple .Card__header h4,
+.Card--simple .Card__header h5,
+.Card--simple .Card__header h6 {
+  font-size: var(--text-size-small);
+  font-weight: var(--font-weight-bold);
+  color: var(--heading-text-color);
+}
+
 .Card__header .OptionsMenu {
   margin-left: auto;
 }
@@ -2054,6 +2238,10 @@ p .Link {
   height: auto;
 }
 
+.Card--simple .Card__content {
+  padding: var(--space-small);
+}
+
 .Card__content ul {
   box-sizing: border-box;
 }
@@ -2070,7 +2258,7 @@ p .Link {
 .Toast {
   top: var(--top-bar-height);
   position: fixed;
-  color: var(--top-bar-background-color-active);
+  color: #0b0e11;
   font-size: var(--text-size-small);
   z-index: var(--z-index-toast);
   align-items: center;
@@ -2105,6 +2293,7 @@ p .Link {
 .Toast__dismiss {
   background: transparent;
   border: 0;
+  height: calc(var(--text-size-small) + 9px);
 }
 
 .Toast__dismiss:focus {
@@ -2132,7 +2321,7 @@ p .Link {
 }
 
 .Toast__message .Link {
-  color: var(--top-bar-background-color-active);
+  color: var(--accent-dark);
   font-size: var(--text-size-small);
   font-weight: var(--font-weight-light);
   text-decoration: underline;
@@ -2148,7 +2337,7 @@ p .Link {
 }
 
 .Toast:focus .Toast__message > .Toast__message-content {
-  border-bottom-color: var(--top-bar-background-color-active);
+  border-bottom-color: var(--accent-dark);
 }
 
 :root {
@@ -2310,7 +2499,7 @@ p .Link {
 .TooltipHead {
   background: var(--tooltip-info-background-color);
   font-size: 16px;
-  color: var(--header-text-color-dark);
+  color: var(--gray-90);
   padding: 16px 28px;
   text-align: center;
 }
@@ -2337,15 +2526,11 @@ button.TooltipTabstop {
 }
 
 :root {
-  --top-bar-background-color: var(--accent-dark);
-  --top-bar-background-color-active: #0b0e11;
-  --top-bar-background-color-light: var(--white);
-  --top-bar-background-color-light-active: var(--white);
-  --top-bar-text-color: var(--accent-light);
-  --top-bar-text-color-light: var(--accent-dark);
-  --top-bar-menuitem-separator: rgba(255, 255, 255, 0.4);
-  --top-bar-menuitem-separator-light: var(--gray-40);
-  --top-bar-border-bottom-color-light: var(--gray-40);
+  --top-bar-background-color: var(--white);
+  --top-bar-background-color-active: var(--white);
+  --top-bar-text-color: var(--accent-dark);
+  --top-bar-menuitem-separator: #b3bfc6;
+  --top-bar-border-bottom-color: var(--gray-40);
   --top-bar-accent-primary: var(--accent-info);
   --top-bar-accent-warning: var(--accent-warning);
   --top-bar-accent-error: var(--accent-danger);
@@ -2366,9 +2551,9 @@ button.TooltipTabstop {
   z-index: var(--z-index-top-bar);
   display: flex;
   align-items: center;
-  background-color: var(--top-bar-background-color-light);
-  color: var(--top-bar-text-color-light);
-  border-bottom: solid 1px var(--top-bar-border-bottom-color-light);
+  background-color: var(--top-bar-background-color);
+  color: var(--top-bar-text-color);
+  border-bottom: solid 1px var(--top-bar-border-bottom-color);
 }
 
 .TopBar--thin .TopBar {
@@ -2411,7 +2596,7 @@ button.TooltipTabstop {
 }
 
 .TopBar > ul > .TopBar__menu-trigger {
-  border-bottom: solid 1px var(--top-bar-border-bottom-color-light);
+  border-bottom: solid 1px var(--top-bar-border-bottom-color);
 }
 
 .TopBar > ul > li:focus-within,
@@ -2427,7 +2612,7 @@ button.TooltipTabstop {
   left: 0;
   width: 100%;
   height: var(--border-width);
-  background-color: var(--top-bar-text-color-light);
+  background-color: var(--top-bar-text-color);
 }
 
 .TopBar > ul > li .fa {
@@ -2440,7 +2625,7 @@ button.TooltipTabstop {
 }
 
 .TopBar a {
-  color: var(--top-bar-text-color-light);
+  color: var(--top-bar-text-color);
   text-decoration: none;
 }
 
@@ -2450,7 +2635,7 @@ button.TooltipTabstop {
 
 .TopBar li.MenuItem--active,
 .TopBar [aria-current='page'] {
-  background-color: var(--top-bar-background-color-light-active);
+  background-color: var(--top-bar-background-color-active);
 }
 
 .TopBar li.MenuItem--active:hover,
@@ -2465,8 +2650,8 @@ button.TooltipTabstop {
   padding: 0 var(--space-small);
   align-self: flex-start;
   box-sizing: border-box;
-  background-color: var(--top-bar-background-color-light);
-  color: var(--top-bar-text-color-light);
+  background-color: var(--top-bar-background-color);
+  color: var(--top-bar-text-color);
 }
 
 .TopBar__item--icon {
@@ -2480,35 +2665,27 @@ button.TooltipTabstop {
 }
 
 .MenuItem--separator {
-  border-left: 1px solid var(--top-bar-menuitem-separator-light);
+  border-left: 1px solid var(--top-bar-menuitem-separator);
 }
 
 /* Dark Theme */
 
-.cauldron--theme-dark .TopBar {
-  background-color: var(--top-bar-background-color);
-  color: var(--top-bar-text-color);
-  border-bottom: solid 1px var(--gray-70);
-}
-
-.cauldron--theme-dark .MenuItem--separator {
-  border-left: 1px solid var(--top-bar-menuitem-separator);
+.cauldron--theme-dark {
+  --top-bar-background-color: var(--accent-dark);
+  --top-bar-menuitem-separator: #5d676f;
+  --top-bar-border-bottom-color: var(--gray-70);
+  --top-bar-text-color: var(--accent-light);
+  --top-bar-background-color-active: #0b0e11;
 }
 
-.cauldron--theme-dark .TopBar__menu-trigger {
-  background-color: var(--top-bar-background-color);
-  color: var(--top-bar-text-color);
+.cauldron--theme-dark .TopBar {
+  border-bottom: none;
 }
 
-.cauldron--theme-dark li.MenuItem--active,
 .cauldron--theme-dark .TopBar [aria-current='page'] {
   background-color: var(--top-bar-background-color-active);
 }
 
-.cauldron--theme-dark a {
-  color: var(--top-bar-text-color);
-}
-
 .cauldron--theme-dark .TopBar > ul > .TopBar__menu-trigger {
   border-bottom: solid 1px var(--top-bar-border-bottom-color);
 }
@@ -2613,88 +2790,136 @@ button.TooltipTabstop {
   color: var(--text-color-light);
 }
 
+:root {
+  --loader-ring-size: 104px;
+  --loader-ring-thickness: 10px;
+  --loader-inner-ring-size: 4px;
+  --loader-ring-color: var(--accent-primary);
+  --loader-inner-ring-color: #fff;
+  --loader-logo-color: var(--accent-primary);
+  --loader-text-color: var(--gray-90);
+  --loader-overlay-border-color: var(--gray-40);
+  --loader-overlay-background-color: var(--workspace-background-color);
+}
+
+.cauldron--theme-dark {
+  --loader-ring-color: var(--accent-dark);
+  --loader-inner-ring-color: var(--accent-info);
+  --loader-logo-color: var(--white);
+  --loader-text-color: var(--white);
+  --loader-overlay-border-color: #5d676e;
+  --loader-overlay-background-color: var(--accent-medium);
+}
+
+.Loader--large {
+  --loader-ring-size: 192px;
+  --loader-ring-thickness: 16px;
+  --loader-inner-ring-size: calc(var(--loader-ring-thickness) * 0.5);
+}
+
+.Loader {
+  position: relative;
+  display: flex;
+  height: var(--loader-ring-size);
+  width: var(--loader-ring-size);
+  align-items: center;
+  justify-content: center;
+}
+
+.Loader:before,
+.Loader:after {
+  content: '';
+  display: block;
+  border-radius: 50%;
+}
+
+.Loader:before {
+  height: var(--loader-ring-size);
+  width: var(--loader-ring-size);
+  border: var(--loader-ring-thickness) solid var(--loader-ring-color);
+  position: absolute;
+}
+
+.Loader:after {
+  --size: calc(
+    var(--loader-ring-size) - var(--loader-ring-thickness) +
+      var(--loader-inner-ring-size)
+  );
+  height: var(--size);
+  width: var(--size);
+  border: var(--loader-inner-ring-size) solid transparent;
+  border-top: var(--loader-inner-ring-size) solid var(--loader-inner-ring-color);
+  animation: spin 1.5s linear infinite;
+}
+
 .Loader__overlay {
-  background: var(--workspace-background-color);
+  background: var(--loader-overlay-background-color);
   position: absolute;
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  border: 2px solid #02101a;
+  border: 1px solid var(--loader-overlay-border-color);
   border-radius: 3px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  min-height: 200px;
-  min-width: 200px;
-  font-size: var(--text-size-normal);
-  padding: 1em;
-  padding-top: 0;
+  width: 260px;
+  padding: var(--space-large) var(--space-small) var(--space-small)
+    var(--space-small);
   z-index: var(--z-index-loader);
+  box-shadow: 1px 1px 7px 0 rgba(0, 0, 0, 0.3);
+  font-size: var(--text-size-smaller);
+  color: var(--text-color-base);
+  text-align: center;
 }
 
 .cauldron--theme-dark .Loader__overlay {
-  border: 2px solid var(--white);
+  color: var(--accent-light);
 }
 
-.Loader {
-  font-size: 10px;
-  margin: 50px auto;
-  width: 7em;
-  height: 7em;
-  border-radius: 50%;
-  background: var(--gray-60);
-  background: linear-gradient(
-    to right,
-    var(--gray-60) 10%,
-    rgba(255, 255, 255, 0) 42%
-  );
-  transform: translateZ(0);
-  position: relative;
-  animation: load 1.4s linear infinite;
+.Loader__overlay__loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--loader-ring-size);
+  min-width: var(--loader-ring-size);
+  margin-bottom: var(--space-small);
 }
 
-.Loader:before {
-  width: 50%;
-  height: 50%;
-  background: var(--gray-60);
-  border-radius: 100% 0 0 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  content: '';
+.Loader__overlay--large .Loader__overlay__loader {
+  min-height: 192px;
+  min-width: 192px;
 }
 
-.Loader:after {
-  background: var(--workspace-background-color);
-  width: 75%;
-  height: 75%;
-  border-radius: 50%;
-  content: '';
-  margin: auto;
+.Loader__overlay__label {
+  color: var(--loader-text-color);
+  font-size: var(--text-size-normal);
+}
+
+.Loader__overlay > *:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.Loader__overlay .Loader {
   position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
 }
 
-.cauldron--theme-dark .Loader {
-  background: linear-gradient(
-    to right,
-    var(--white) 10%,
-    var(--workspace-background-color) 45%
-  );
+.Loader__overlay svg {
+  color: var(--loader-logo-color);
+  height: calc(var(--loader-ring-size) * 0.7);
+  width: calc(var(--loader-ring-size) * 0.7);
 }
 
-.cauldron--theme-dark .Loader:before {
-  background: var(--white);
+.Loader__overlay--large svg {
+  height: 120px;
+  width: 120px;
 }
 
-@keyframes load {
+@keyframes spin {
   0% {
     transform: rotate(0deg);
   }
-
   100% {
     transform: rotate(360deg);
   }
@@ -2713,12 +2938,14 @@ button.TooltipTabstop {
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  background: #000;
-  color: #d1d9e1;
+  background: var(--gray-20);
+  color: var(--gray-90);
+  border: 1px solid var(--gray-40);
+  color: var(--accent-primary-active);
 }
 
 .Code .hljs-comment {
-  color: #969896;
+  color: #575957;
   font-style: italic;
 }
 
@@ -2727,126 +2954,145 @@ button.TooltipTabstop {
   font-style: italic;
 }
 
-.Code .hljs-keyword {
-  color: #cc99cc;
-}
-
-.Code .hljs-selector-tag {
-  color: #cc99cc;
-}
-
-.Code .hljs-literal {
-  color: #cc99cc;
-}
-
-.Code .hljs-type {
-  color: #cc99cc;
-}
-
-.Code .hljs-addition {
-  color: #cc99cc;
+.Code .hljs-keyword,
+.Code .hljs-selector-tag,
+.Code .hljs-literal,
+.Code .hljs-type,
+.Code .hljs-addition,
+.Code .hljs-attr,
+.Code .hljs-attribute {
+  color: #8a0c8a;
 }
 
 .Code .hljs-number {
-  color: #f99157;
+  color: #115800;
 }
 
-.Code .hljs-selector-attr {
-  color: #f99157;
-}
-
-.Code .hljs-selector-pseudo {
-  color: #f99157;
+.Code .hljs-selector-attr,
+.Code .jljs-selector-psuedo {
+  color: var(--accent-primary-active);
 }
 
 .Code .hljs-string {
-  color: #8abeb7;
-}
-
-.Code .hljs-doctag {
-  color: #8abeb7;
+  color: var(--gray-60);
 }
 
+.Code .hljs-doctag,
 .Code .hljs-regexp {
-  color: #8abeb7;
+  color: #256244;
 }
 
+.Code .hljs-built_in,
 .Code .hljs-title {
-  color: #b5bd68;
-}
-
-.Code .hljs-name {
-  color: #b5bd68;
-  font-weight: bold;
+  color: var(--accent-dark);
 }
 
+.Code .hljs-name,
 .Code .hljs-section {
-  color: #b5bd68;
+  color: #113366;
   font-weight: bold;
 }
 
-.Code .hljs-built_in {
-  color: #b5bd68;
+.Code .hljs-variable,
+.Code .hljs-template-variable,
+.Code .hljs-tag,
+.Code .hljs-selector-id,
+.Code .hljs-selector-class {
+  color: #8a0c8a;
 }
 
-.Code .hljs-variable {
-  color: #ffcc66;
+.Code .hljs-strong {
+  font-weight: bold;
 }
 
-.Code .hljs-template-variable {
-  color: #ffcc66;
+.Code .hljs-symbol,
+.Code .hljs-bullet,
+.Code .hljs-subst,
+.Code .hljs-meta,
+.Code .hljs-link {
+  color: #f99157;
 }
 
-.Code .hljs-selector-id {
-  color: #ffcc66;
+.Code .hljs-deletion {
+  color: #dc322f;
 }
 
-.Code .hljs-class .hljs-title {
-  color: #ffcc66;
+.Code .hljs-formula {
+  background: #eee8d5;
 }
 
-.Code .hljs-strong {
-  font-weight: bold;
+.Code .hljs-emphasis {
+  font-style: italic;
 }
 
-.Code .hljs-symbol {
-  color: #f99157;
+/* Dark Theme */
+
+.cauldron--theme-dark .Code.hljs {
+  background: var(--accent-dark);
+  color: var(--accent-light);
+  border: 1px solid transparent;
 }
 
-.Code .hljs-bullet {
-  color: #f99157;
+.cauldron--theme-dark .Code .hljs-string {
+  color: #8abeb7;
 }
 
-.Code .hljs-subst {
-  color: #f99157;
+.cauldron--theme-dark .Code .hljs-keyword,
+.cauldron--theme-dark .Code .hljs-selector-tag,
+.cauldron--theme-dark .Code .hljs-literal,
+.cauldron--theme-dark .Code .hljs-type,
+.cauldron--theme-dark .Code .hljs-addition {
+  color: #cc99cc;
 }
 
-.Code .hljs-meta {
-  color: #f99157;
+.cauldron--theme-dark .Code .hljs-comment {
+  color: #9f9f9f;
 }
 
-.Code .hljs-link {
-  color: #f99157;
+.cauldron--theme-dark .Code .hljs-quote {
+  color: orange;
 }
 
-.Code .hljs-deletion {
-  color: #dc322f;
+.Code .hljs-name,
+.Code .hljs-section {
+  color: var(--accent-primary-active);
 }
 
-.Code .hljs-formula {
-  background: #eee8d5;
+.cauldron--theme-dark .Code .hljs-variable,
+.cauldron--theme-dark .Code .hljs-template-variable,
+.cauldron--theme-dark .Code .hljs-tag,
+.cauldron--theme-dark .Code .hljs-selector-id,
+.cauldron--theme-dark .Code .hljs-selector-class,
+.cauldron--theme-dark .Code .hljs-deletion {
+  color: #b5bd68;
 }
 
-.Code .hljs-attr {
-  color: #81a2be;
+.cauldron--theme-dark .Code .hljs-doctag,
+.cauldron--theme-dark .Code .hljs-regexp {
+  color: #f1d4a0;
 }
 
-.Code .hljs-attribute {
+.cauldron--theme-dark .Code .hljs-deletion {
+  color: #f37a78;
+}
+
+.cauldron--theme-dark .Code .hljs-number {
+  color: #ffb200;
+}
+
+.cauldron--theme-dark .Code .hljs-attr,
+.cauldron--theme-dark .Code .hljs-attribute {
   color: #81a2be;
 }
 
-.Code .hljs-emphasis {
-  font-style: italic;
+.cauldron--theme-dark .Code .hljs-built_in,
+.cauldron--theme-dark .Code .hljs-title {
+  color: var(--accent-light);
+}
+
+.cauldron--theme-dark .Code .hljs-selector-attr,
+.cauldron--theme-dark .Code .hljs-selector-pseudo {
+  color: #f99157;
 }
 
 .Line {
@@ -2871,28 +3117,147 @@ button.TooltipTabstop {
   border: 1px solid #ccc;
 }
 
+:root {
+  --tabs-border-color: #b3bfc6;
+  --tab-shadow-color: var(--accent-primary);
+  --tab-inactive-background-color: var(--gray-20);
+  --tab-inactive-text-color: var(--gray-60);
+  --tab-active-background-color: var(--white);
+  --tabs-active-text-color: var(--gray-90);
+}
+
+.cauldron--theme-dark {
+  --tabs-border-color: #5d676f;
+  --tab-shadow-color: var(--accent-info);
+  --tab-inactive-background-color: var(--accent-medium);
+  --tab-inactive-text-color: var(--accent-light);
+  --tab-active-background-color: var(--accent-dark);
+  --tabs-active-text-color: var(--white);
+}
+
+.Tabs {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.Tabs--vertical {
+  display: inline-flex;
+}
+
+.Tabs--vertical ~ .TabPanel {
+  vertical-align: top;
+  display: inline-block;
+}
+
+.Tablist {
+  display: flex;
+  flex-direction: row;
+  border-left: 1px solid var(--tabs-border-color);
+}
+
+.Tabs--vertical .Tablist {
+  flex-direction: column;
+}
+
+.Tab {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 2.875rem;
+  white-space: nowrap;
+  list-style-type: none;
+  border-top: 1px solid var(--tabs-border-color);
+  border-right: 1px solid var(--tabs-border-color);
+  text-decoration: underline;
+  background-color: var(--tab-inactive-background-color);
+  color: var(--tab-inactive-text-color);
+  padding: var(--space-small);
+}
+
+.Tabs--vertical .Tab {
+  justify-content: flex-start;
+}
+
+.Tabs--vertical .Tab {
+  border-right: none;
+}
+
+.cauldron--theme-light .Tabs--vertical .Tab:last-child {
+  border-bottom: 1px solid var(--tabs-border-color);
+}
+
+.Tab:hover {
+  cursor: pointer;
+  background-color: var(--tab-active-background-color);
+  color: var(--tabs-active-text-color);
+}
+
+.Tab--active {
+  color: var(--tabs-active-text-color);
+  background-color: var(--tab-active-background-color);
+  font-weight: bold;
+  text-decoration: none;
+  box-shadow: inset 0 4px 0 var(--tab-shadow-color);
+  z-index: 1;
+}
+
+.Tabs--vertical .Tab--active {
+  box-shadow: inset 4px 0 0 var(--tab-shadow-color);
+}
+
+.TabPanel {
+  overflow-wrap: break-word;
+  color: var(--tabs-active-text-color);
+  background-color: var(--tab-active-background-color);
+  border: 1px solid var(--tabs-border-color);
+  padding: 1rem;
+}
+
+.TabPanel > * {
+  margin-top: 0;
+}
+
+.TabPanel--hidden {
+  display: none !important;
+}
+
+.Tabs--thin .Tab {
+  height: 2.125rem;
+  padding: var(--space-smallest);
+}
+
 :root {
   --tag-text-color: var(--gray-90);
   --tag-label-text-color: var(--gray-60);
   --tag-background-color: var(--gray-20);
+  --tag-border-color: var(--gray-90);
+}
+
+.cauldron--theme-dark {
+  --tag-text-color: var(--white);
+  --tag-label-text-color: var(--accent-light);
+  --tag-background-color: var(--accent-medium);
+  --tag-border-color: var(--accent-medium);
 }
 
 .Tag {
   color: var(--tag-text-color);
   background-color: var(--tag-background-color);
   font-size: var(--text-size-smaller);
-  border: 1px solid currentColor;
+  border: 1px solid var(--tag-border-color);
   border-radius: 11px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 2px 8px;
   width: 90px;
+  font-weight: var(--font-weight-medium);
 }
 
 .Tag__label {
   color: var(--tag-label-text-color);
   margin-right: 3px;
+  font-weight: var(--font-weight-normal);
 }
 
 :root {
@@ -2904,6 +3269,13 @@ button.TooltipTabstop {
   --table-space: 11px;
 }
 
+.cauldron--theme-dark {
+  --table-header-text-color: var(--white);
+  --table-header-background-color: var(--accent-dark);
+  --table-cell-text-color: var(--accent-light);
+  --table-cell-background-color: var(--accent-medium);
+}
+
 .Table {
   font-size: var(--text-size-small);
   border-collapse: collapse;
@@ -2915,8 +3287,7 @@ button.TooltipTabstop {
 
 .TableHeader {
   background: var(--table-header-background-color);
-  font-family: 'Lato', sans-serif;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-medium);
   color: var(--table-header-text-color);
   border-bottom: 2px solid var(--table-row-border-color);
 }
@@ -2937,14 +3308,23 @@ button.TooltipTabstop {
 }
 
 :root {
-  --data-list-value-background-color: var(--gray-20);
+  --data-list-background-color: var(--gray-20);
+  --data-list-value-background-color: var(--white);
   --data-list-border-color: var(--gray-40);
   --data-list-text-color: var(--gray-90);
-  --data-list-value-text-color: var(--gray-60);
+  --data-list-value-text-color: var(--gray-80);
   --data-list-space: 11px;
   --data-list-value-width: 187px;
 }
 
+.cauldron--theme-dark {
+  --data-list-background-color: var(--accent-dark);
+  --data-list-value-background-color: var(--accent-medium);
+  --data-list-text-color: var(--white);
+  --data-list-value-text-color: var(--accent-light);
+  --data-list-border-color: #5d676f;
+}
+
 .DescriptionList {
   color: var(--data-list-text-color);
   font-size: var(--text-size-small);
@@ -2963,6 +3343,7 @@ button.TooltipTabstop {
   padding: var(--data-list-space);
   border-top: 1px solid var(--data-list-border-color);
   border-bottom: 1px solid var(--data-list-border-color);
+  background-color: var(--data-list-value-background-color);
 }
 
 .DescriptionList__item {
@@ -2974,6 +3355,7 @@ button.TooltipTabstop {
   border: 0;
   margin-bottom: var(--space-small);
   display: block;
+  background-color: var(--data-list-value-background-color);
 }
 
 .DescriptionList__item:first-child {
@@ -2993,12 +3375,11 @@ button.TooltipTabstop {
 }
 
 .DescriptionList__term {
-  background-color: var(--data-list-value-background-color);
+  background-color: var(--data-list-background-color);
   width: var(--data-list-value-width);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-medium);
   border-right: 1px solid var(--data-list-border-color);
   flex: 0 0 auto;
-  font-family: 'Lato', sans-serif;
 }
 
 .DescriptionList--collapsed .DescriptionList__term {
@@ -3008,7 +3389,10 @@ button.TooltipTabstop {
 }
 
 .DescriptionList__details {
+  width: 100%;
   color: var(--data-list-value-text-color);
+  background-color: var(--data-list-value-background-color);
+  font-weight: var(--font-weight-normal);
 }
 
 .DescriptionList__term,
@@ -3113,3 +3497,408 @@ button.TooltipTabstop {
   background: var(--accent-dark);
   color: var(--white);
 }
+
+/* Dark Theme */
+
+.cauldron--theme-dark .Stepper {
+  color: var(--accent-light);
+  background-color: var(--accent-dark);
+}
+
+.cauldron--theme-dark .Stepper__step-line {
+  border-top: var(--step-line-height) solid var(--accent-medium);
+}
+
+.cauldron--theme-dark .Stepper__step-indicator {
+  color: var(--white);
+  background: var(--accent-medium);
+}
+
+.cauldron--theme-dark .Stepper__step--current .Stepper__step-indicator {
+  background: var(--white);
+  color: var(--accent-dark);
+  box-shadow: 0 0 0 2px var(--accent-dark), 0 0 0 4px var(--accent-info);
+}
+
+.cauldron--theme-dark .Stepper__step--current .Stepper__step-line,
+.cauldron--theme-dark .Stepper__step--complete .Stepper__step-line {
+  border-color: var(--accent-info);
+}
+
+.cauldron--theme-dark .Stepper__step--complete .Stepper__step-indicator {
+  background: var(--accent-info);
+  color: var(--accent-dark);
+}
+
+:root {
+  --panel-border-color: var(--gray-40);
+  --panel-background-color: var(--white);
+  --panel-heading-color: var(--gray-90);
+}
+
+.Panel {
+  padding: var(--space-large);
+  border: 1px solid var(--panel-border-color);
+  border-radius: 3px;
+  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15);
+  background-color: var(--panel-background-color);
+}
+
+.Panel__Heading,
+.Panel legend {
+  font-size: var(--text-size-medium);
+  color: var(--panel-heading-color);
+  padding: 0;
+  margin: 0 0 var(--space-large) 0;
+  font-weight: var(--font-weight-bold);
+}
+
+fieldset.Panel {
+  position: relative;
+  padding-top: 76px;
+}
+
+/* reset absurd browser-default legend styles */
+
+.Panel legend {
+  position: absolute;
+  top: var(--space-large);
+}
+
+.Panel--collapsed {
+  padding: 12px;
+}
+
+.Panel--collapsed .Panel__Heading {
+  margin: 0 0 12px 0;
+  font-size: var(--text-size-normal);
+}
+
+/* Dark Theme */
+
+.cauldron--theme-dark {
+  --panel-border-color: #5d676f;
+  --panel-background-color: var(--accent-medium);
+  --panel-heading-color: var(--accent-light);
+}
+
+:root {
+  --issue-panel-border-color: var(--gray-40);
+  --issue-panel-header-background-color: var(--gray-20);
+  --issue-panel-header-color: var(--gray-90);
+  --issue-panel-content-background-color: var(--white);
+  --issue-panel-content-color: var(--gray-60);
+}
+
+.IssuePanel {
+  border: 1px solid var(--issue-panel-border-color);
+}
+
+.IssuePanel__Header {
+  background-color: var(--issue-panel-header-background-color);
+  color: var(--issue-panel-header-color);
+  font-size: var(--text-size-normal);
+  display: flex;
+  border-bottom: 1px solid var(--issue-panel-border-color);
+  align-items: center;
+  padding: var(--space-half) 0;
+}
+
+.IssuePanel__Header-title {
+  flex-grow: 1;
+  display: flex;
+  font-weight: var(--font-weight-bold);
+  padding-left: var(--space-small);
+}
+
+.IssuePanel__Header-actions {
+  flex-grow: 1;
+  text-align: right;
+  margin-right: var(--space-smallest);
+}
+
+.IssuePanel__Content {
+  font-size: var(--text-size-smaller);
+  background-color: var(--issue-panel-content-background-color);
+  color: var(--issue-panel-content-color);
+  padding: var(--space-small);
+}
+
+/* Dark Theme */
+
+.cauldron--theme-dark {
+  --issue-panel-border-color: #5d676f;
+  --issue-panel-header-background-color: var(--accent-dark);
+  --issue-panel-header-color: var(--white);
+  --issue-panel-content-background-color: var(--accent-medium);
+  --issue-panel-content-color: var(--accent-light);
+}
+
+.cauldron--theme-dark .IssuePanel__Header {
+  border-bottom: 1px solid var(--issue-panel-border-color);
+}
+
+:root {
+  --top-nav-height: 3rem;
+  --top-nav-background-color: var(--top-bar-background-color);
+  --top-nav-background-color-hover: var(--gray-20);
+  --top-nav-text-color: var(--top-bar-text-color);
+  --top-nav-border-bottom-color: var(--gray-40);
+  --top-nav-active-shadow-color: var(--accent-primary);
+  --top-nav-box-shadow-color: var(--gray-40);
+}
+
+.cauldron--theme-dark {
+  --top-nav-background-color: var(--top-bar-background-color);
+  --top-nav-background-color-hover: var(--accent-medium);
+  --top-nav-text-color: var(--top-bar-text-color);
+  --top-nav-border-bottom-color: #5d676f;
+  --top-nav-active-shadow-color: var(--accent-info);
+  --top-nav-box-shadow-color: #5d676f;
+}
+
+.NavBar {
+  height: var(--top-nav-height);
+  /* allow the top bar dropdown to be higher in stacking order */
+  z-index: 1;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background-color: var(--top-nav-background-color);
+  color: var(--top-nav-text-color);
+  border-bottom: 1px solid var(--top-nav-border-bottom-color);
+}
+
+.NavBar > ul {
+  width: 100%;
+  list-style-type: none;
+  display: flex;
+  z-index: var(--z-index-top-nav);
+}
+
+.NavBar > ul > li {
+  height: var(--top-nav-height);
+  font-size: var(--text-size-normal);
+  min-width: 9.375rem;
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  background-color: var(--top-nav-background-color);
+  border-bottom: 1px solid var(--top-nav-border-bottom-color);
+  border-right: 1px solid var(--top-nav-box-shadow-color);
+  transition: background-color 0.3s ease;
+}
+
+.NavBar > ul > li:first-child:not(.NavBar__trigger) {
+  border-left: 1px solid var(--top-nav-box-shadow-color);
+}
+
+.NavBar > ul > li:hover {
+  background-color: var(--top-nav-background-color-hover);
+}
+
+.NavBar > ul > li:focus-within {
+  /* make focus outline visible */
+  z-index: calc(var(--z-index-top-nav) + 1);
+}
+
+.NavBar > ul > li.NavItem--active {
+  box-shadow: inset 0px 4px 0px var(--top-nav-active-shadow-color);
+  /* make focus outline visible */
+  z-index: calc(var(--z-index-top-nav) + 1);
+}
+
+.NavBar > ul > li > a {
+  color: var(--top-nav-text-color);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--space-medium);
+  /* clicking anywhere in the "item" should activate the anchor */
+  height: 100%;
+  width: 100%;
+}
+
+/* NavBar collapsed */
+
+.NavBar.NavBar--collapsed {
+  align-items: flex-start;
+  flex-direction: column;
+  height: auto;
+}
+
+.NavBar--collapsed > ul {
+  flex-direction: column;
+  width: 100%;
+  overflow: auto;
+}
+
+.NavBar.NavBar--collapsed > ul > li {
+  width: 100%;
+  height: var(--top-nav-height);
+  font-size: var(--text-size-small);
+  color: var(--top-nav-text-color);
+  flex: 0 1 3.125rem;
+  border-right: none;
+}
+
+.NavBar.NavBar--collapsed > ul > .NavItem--active {
+  box-shadow: inset 0px -1px 0px var(--top-nav-box-shadow-color),
+    inset 6px 0px 0px var(--top-nav-active-shadow-color);
+}
+
+.NavBar.NavBar--collapsed > .NavBar__trigger--active {
+  box-shadow: inset 0px -1px 0px var(--top-nav-box-shadow-color),
+    inset 0px 4px 0px var(--top-nav-active-shadow-color);
+  z-index: calc(var(--z-index-top-nav) + 1);
+}
+
+.NavBar--collapsed > .NavBar__trigger {
+  padding: 0 var(--space-small);
+  background-color: var(--top-nav-background-color);
+  color: var(--top-nav-text-color);
+  width: 100%;
+  height: 3.125rem;
+}
+
+.NavBar--collapsed > .NavBar__trigger:hover {
+  background-color: var(--top-nav-background-color-hover);
+}
+
+/* make focus outline visible */
+
+.NavBar--collapsed > ul > li > a:focus,
+.NavBar--collapsed > .NavBar__trigger:focus {
+  outline-offset: calc(var(--space-quarter) * -1);
+}
+
+.NavBar--collapsed > .NavBar__trigger .Icon {
+  margin-right: var(--space-smallest);
+}
+
+@media (max-width: 61.25rem) {
+  .NavBar > ul > li {
+    font-size: var(--text-size-small);
+  }
+
+  .NavBar > ul > li:not(.NavItem--previous):not(.NavItem--next) {
+    min-width: 7.125rem;
+  }
+}
+
+:root {
+  --progress-bar-background-color: var(--accent-dark);
+  --progress-bar-fill-color: var(--accent-info-light);
+  --progress-bar-animation-timing: 150ms;
+}
+
+.ProgressBar {
+  background-color: var(--progress-bar-background-color);
+  padding: 2px;
+  border-radius: calc((var(--space-small) * 0.5) + 2px);
+  margin-bottom: var(--space-smallest);
+}
+
+.ProgressBar--fill {
+  border-radius: calc(var(--space-small) * 0.5);
+  background-color: var(--progress-bar-fill-color);
+  height: var(--space-small);
+  min-width: var(--space-small);
+  transition: width linear var(--progress-bar-animation-timing);
+}
+
+.cauldron--theme-dark .Icon--robot circle {
+  stroke: var(--accent-light);
+  stroke-width: 2px;
+  color: #0b141c;
+}
+
+.cauldron--theme-dark .Icon--robot path {
+  color: #76cfe8;
+}
+
+.cauldron--theme-light .Icon--robot circle {
+  stroke: var(--gray-40);
+  stroke-width: 2px;
+  color: var(--white);
+}
+
+.cauldron--theme-light .Icon--robot path {
+  color: #3e7aae;
+}
+
+:root {
+  --address-line-height: 1.618;
+}
+
+.Address {
+  line-height: var(--address-line-height);
+}
+
+.Pagination > ul {
+  list-style-type: none;
+  display: flex;
+  align-items: center;
+  font-size: var(--text-size-small);
+}
+
+.Pagination > ul > li {
+  margin-right: 5px;
+}
+
+.Pagination button {
+  height: 2.26rem;
+  width: 2.26rem;
+  border-radius: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* light theme-specific styles */
+  background: var(--gray-20);
+  border: 1px solid var(--gray-40);
+  color: var(--gray-90);
+}
+
+.Pagination button[aria-disabled='true'] {
+  color: var(--gray-40);
+  margin: 2px;
+}
+
+.Pagination button .Icon {
+  width: auto;
+  height: auto;
+}
+
+.Pagination [role='log'] {
+  margin-left: calc(var(--space-medium) - 5px);
+  margin-right: calc(var(--space-medium) - 5px);
+  color: var(--gray-60);
+}
+
+.Pagination [role='log'] strong {
+  color: var(--gray-90);
+}
+
+/*
+ * dark theme
+ */
+
+.cauldron--theme-dark .Pagination button {
+  background-color: var(--accent-medium);
+  border-color: transparent;
+}
+
+.cauldron--theme-dark .Pagination button[aria-disabled='true'] {
+  color: #5d676f;
+}
+
+.cauldron--theme-dark .Pagination [role='log'] {
+  color: var(--accent-light);
+  font-variant-numeric: tabular-nums;
+}
+
+.cauldron--theme-dark .Pagination [role='log'] strong {
+  color: var(--white);
+}