@servicetitan/design-system 12.8.1 → 12.10.0

package/dist/system.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 html {
-  --anvil-version: "12.8.1";
+  --anvil-version: "12.10.0";
 }
 
 /*
@@ -17288,7 +17288,7 @@ button.Button {
   line-height: 1.5;
 }
 .Button.Button--icon-only.Button--xsmall {
-  line-height: 0.8;
+  line-height: 1;
 }
 .Button.Button--icon-only.Button--xsmall svg {
   height: 20px;
@@ -25388,6 +25388,9 @@ button.a-Icon svg {
 .ProgressTrackerDivider {
   position: relative;
   width: 100%;
+  flex-shrink: 0;
+  flex-grow: 1;
+  flex-basis: 0;
 }
 .ProgressTrackerDivider::after {
   content: "";
@@ -25397,16 +25400,24 @@ button.a-Icon svg {
   top: 50%;
   margin-top: -1px;
   height: 2px;
-  background-color: var(--colorsBorderGrey, #dfe0e1);
+  background-color: var(--colorsStatusDefault, #8c9ca5);
+}
+
+.ProgressTracker--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ProgressTrackerDivider--completed::after {
+  background-color: var(--colorsStatusInfo, #2270ee);
 }
 
 .ProgressTrackerStep {
-  color: var(--colorsTextSubdued, #606162);
   display: flex;
-  align-items: center;
+  flex-shrink: 1;
+  flex-grow: 0;
   position: relative;
-  margin: 0 24px;
-  padding: 0 8px;
+  margin: 0 16px;
   text-decoration: none;
 }
 .ProgressTrackerStep:first-child {
@@ -25423,12 +25434,20 @@ button.a-Icon svg {
   box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
+.ProgressTrackerStep--small {
+  margin: 0 8px;
+}
+
+.ProgressTrackerStep--hideLabels {
+  margin: 0 8px;
+}
+
 /* Children */
 .ProgressTrackerStep__icon {
-  width: 1.8em;
-  height: 1.8em;
+  font-weight: 700;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  background: var(--colorsSurfaceGreyStronger, #bcbcbd);
   color: var(---colorsTextInverted, #ffffff);
   display: flex;
   flex-shrink: 0;
@@ -25436,43 +25455,91 @@ button.a-Icon svg {
   align-items: center;
 }
 
-.ProgressTrackerStep__label {
+.ProgressTrackerStep__simple {
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  color: var(---colorsTextInverted, #ffffff);
+  display: flex;
   flex-shrink: 0;
-  white-space: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+.ProgressTrackerStep--incomplete .ProgressTrackerStep__simple {
+  box-shadow: 0 0 0 2px inset var(--colorsStatusDefault, #8c9ca5);
+}
+.ProgressTrackerStep--active .ProgressTrackerStep__simple {
+  box-shadow: 0 0 0 2px inset var(--colorsTextPrimary, #1360d9);
+}
+.ProgressTrackerStep--complete .ProgressTrackerStep__simple, .ProgressTrackerStep--editing .ProgressTrackerStep__simple {
+  background-color: var(--colorsTextPrimary, #1360d9);
+}
+
+.ProgressTrackerStep__label {
   margin-left: 8px;
 }
 
-/* States */
-.ProgressTrackerStep--clickable:hover {
+.ProgressTrackerStep--medium .ProgressTrackerStep__label {
+  margin-top: 3px;
+}
+
+.ProgressTrackerStep--clickable {
   cursor: pointer;
-  opacity: 0.8;
+}
+.ProgressTrackerStep--clickable .ProgressTrackerStep__label {
+  color: var(--colorsTextPrimary, #1360d9);
+}
+.ProgressTrackerStep--clickable .ProgressTrackerStep__label:hover, .ProgressTrackerStep--clickable .ProgressTrackerStep__label:focus {
+  text-decoration: underline;
+  outline: none;
 }
 
-.ProgressTrackerStep--complete {
-  color: var(--colorsTextDefault, #141414);
+.ProgressTrackerStep--incomplete {
+  color: var(--colorsTextSubdued, #606162);
+}
+.ProgressTrackerStep--incomplete .ProgressTrackerStep__icon {
+  box-shadow: 0 0 0 2px inset var(--colorsStatusDefault, #8c9ca5);
+  color: var(--colorsTextSubdued, #606162);
 }
+
 .ProgressTrackerStep--complete .ProgressTrackerStep__icon {
-  background-color: var(--colorsStatusSuccess, #18a761);
+  color: var(--colorsTextPrimary, #1360d9);
 }
 .ProgressTrackerStep--complete .a-Icon {
-  font-size: 20px;
+  font-size: 28px;
 }
 
 .ProgressTrackerStep--editing,
 .ProgressTrackerStep--active {
   color: var(--colorsTextDefault, #141414);
 }
+.ProgressTrackerStep--editing .ProgressTrackerStep__label,
+.ProgressTrackerStep--active .ProgressTrackerStep__label {
+  font-weight: 700;
+}
 .ProgressTrackerStep--editing .ProgressTrackerStep__icon,
 .ProgressTrackerStep--active .ProgressTrackerStep__icon {
-  background-color: var(--colorsStatusInfo, #2270ee);
+  box-shadow: 0 0 0 2px inset var(--colorsTextPrimary, #1360d9);
+  color: var(--colorsTextPrimary, #1360d9);
 }
 
 .ProgressTrackerStep--disabled {
-  pointer-events: none !important;
+  pointer-events: none;
 }
 .ProgressTrackerStep--disabled, .ProgressTrackerStep--disabled:hover {
   opacity: 0.6;
 }
+.ProgressTracker--disabled .ProgressTrackerStep--disabled {
+  opacity: 1;
+}
+
+.ProgressTrackerStep__Tooltip {
+  display: none;
+}
+
+.ProgressTrackerStep__Tooltip--visible {
+  display: block;
+}
 
 .a-Radio {
   /* Set color on root of component. It can be overridden after the @include */
@@ -25727,6 +25794,12 @@ button.a-Icon svg {
 .Scroll--of-y-hidden > .Scroll__Scrollbar {
   overflow-y: hidden;
 }
+.Scroll__Scrollbar:focus {
+  outline-color: var(--colorsFocusRingPrimary, #a9d1ff);
+}
+.Scroll__Scrollbar:focus-visible {
+  outline-color: var(--colorsFocusRingPrimary, #a9d1ff);
+}
 
 /* Scrollable without visible scrollbar */
 .Scroll--of-x-hidden.Scroll--hidden-scrollbar > .Scroll__Scrollbar {
@@ -26139,20 +26212,23 @@ button.a-Icon svg {
   color: var(--colorsTextDefault, #141414);
   padding: 16px;
 }
-.SideNav .Tag {
-  margin-left: 8px;
-  transform: translateY(-1px);
-}
 .SideNav a {
   text-decoration: none;
 }
+.SideNav .SideNav {
+  padding: 0;
+}
 
 .SideNav__title {
-  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
-  margin: 0 16px;
-  padding: 8px 0 24px;
+  margin: 0 8px;
+  margin-bottom: 16px;
+  padding: 8px 0;
   color: var(--colorsTextOnGrey, #444445);
 }
+.SideNav__title .Tag {
+  margin-left: 8px;
+  transform: translateY(-1px);
+}
 
 .SideNav__list {
   list-style: none;
@@ -26160,45 +26236,121 @@ button.a-Icon svg {
   margin-left: 0;
   margin-top: 0;
   padding-left: 0;
-  padding-top: 16px;
 }
 
 .SideNavItem {
   margin: 0;
   padding: 0;
 }
-
-.SideNavItem__button {
+.SideNavItem > .SideNavItem__button {
   border-radius: 3px;
   color: var(--colorsTextDefault, #141414);
   font-weight: 400;
   cursor: pointer;
-  display: block;
-  padding: 6px 16px;
+  display: flex;
+  min-height: 22px;
+  padding: 6px 8px;
   position: relative;
   transition: color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
   text-decoration: none;
+  /* States */
 }
-.SideNavItem__button:focus {
+.SideNavItem > .SideNavItem__button:hover {
+  background: var(--colorsHoverDefault, rgba(4, 4, 4, 0.08));
+}
+.SideNavItem > .SideNavItem__button:active:not(:focus-within) {
+  background-color: var(--colorsActiveDefault, rgba(4, 4, 4, 0.2));
+}
+.SideNavItem > .SideNavItem__button.SideNavItem__button--focus-visible:focus {
   outline: none;
+  box-shadow: inset 0 0 0 2px var(--colorsFocusRingPrimary, #a9d1ff);
 }
-.SideNavItem__button:hover, .SideNavItem__button.SideNavItem__button--focus-visible:focus {
-  background: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
-  color: var(--colorsTextPrimary, #2270ee);
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__prefix,
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__content,
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__suffix {
+  color: currentColor;
+  display: inline-flex;
+  align-items: center;
+}
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__prefix {
+  margin-right: 8px;
 }
-.SideNavItem--active .SideNavItem__button {
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__suffix {
+  margin-left: 8px;
+}
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__content {
+  flex-grow: 1;
+  margin-top: 0.5px;
+}
+.SideNavItem.SideNavItem--disabled > .SideNavItem__button {
+  background-color: transparent !important;
+  opacity: 0.4;
+  pointer-events: none;
+}
+.SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
   color: var(--colorsTextPrimary, #2270ee);
 }
+.SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) > .SideNavItem__button__content {
+  font-weight: bold;
+}
+.SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) .a-Icon svg {
+  color: var(--colorsTextPrimary, #2270ee) !important;
+  fill: var(--colorsTextPrimary, #2270ee) !important;
+}
+.SideNavItem .SideNavItem__button--expanded > .SideNavItem__button__content {
+  font-weight: bold;
+}
+.SideNavItem .SideNav .SideNavItem > .SideNavItem__button > .SideNavItem__button__content {
+  margin-left: 28px;
+}
+.SideNavItem .SideNav .SideNavItem > .SideNavItem__button .SideNavItem__button__prefix {
+  display: none;
+}
+
+.SideNavItem__button__suffix__collapsible-icon {
+  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 300ms 0ms;
+  transform: rotate(0) translateY(1px);
+}
+.SideNavItem__button--expanded .SideNavItem__button__suffix__collapsible-icon {
+  transform: rotate(180deg) translateY(0);
+}
+
+.SideNavItem__button .SideNavItem__button__prefix .a-Icon,
+.SideNavItem__button .SideNavItem__button__suffix .a-Icon {
+  margin-top: -0.5px;
+}
+.SideNavItem__button .StatusLight {
+  margin: -4px -5px;
+}
+.SideNavItem__button .Button {
+  margin: -4px;
+  vertical-align: middle;
+}
+.SideNavItem__button .ActionMenu__TriggerWrapper {
+  margin-top: -3px;
+}
+.SideNavItem__button .Tooltip {
+  margin-top: -2px;
+}
+.SideNavItem__button .Tag {
+  margin-left: 8px;
+  transform: translateY(0);
+}
 
 .SideNavGroup {
-  margin-top: 32px;
+  margin-top: 24px;
 }
 .SideNav__list .SideNavGroup:first-child {
   margin-top: 16px;
 }
+.SideNav__list .SideNavGroup:last-child {
+  margin-bottom: 16px;
+}
 
 .SideNavGroup__title {
-  margin: 0 16px 8px;
+  margin: 8px;
+  margin-top: 0;
 }
 
 .SideNavGroup__list {
@@ -34337,6 +34489,13 @@ _:-ms-lang(x), .Tooltip__body {
 .gap-normal-i {
   gap: normal !important;
 }
+.CollapsibleList {
+  /* Set color on root of component. It can be overridden after the @include */
+  color: var(--colorsTextDefault, #141414);
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+}
+
 .Overlay {
   position: fixed;
   top: 0;