@servicetitan/design-system 12.6.2 → 12.7.1-patch.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.6.2";
+  --anvil-version: "12.7.1-patch.0";
 }
 
 /*
@@ -16449,9 +16449,10 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
   color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  padding: 12px 0;
-  max-width: 640px;
+  font-size: 16px;
   line-height: 1.5;
+  max-width: 640px;
+  padding: 12px 0;
   text-align: left;
   text-decoration: none;
   width: 100%;
@@ -16578,6 +16579,7 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
 .Announcement__body {
   align-items: center;
   display: flex;
+  line-height: 1.25;
   margin: auto;
   overflow: hidden;
   padding-left: 4px;
@@ -16608,9 +16610,8 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
 .Select--flat .OptionList__option--text .Checkbox__html-label {
   align-items: flex-start;
 }
-.Select--flat .OptionList__option--text .Checkbox__box {
-  position: relative;
-  top: 10px;
+.Select--flat .OptionList__option--text .Checkbox__html-label .Checkbox__box {
+  top: 1px;
 }
 
 .Select__header {
@@ -16988,6 +16989,7 @@ kendo-grid tr.k-hover .k-grid-content-sticky.k-selected {
   display: inline-flex;
   flex: 1;
   font-size: 14px;
+  line-height: 1.25;
   justify-content: flex-start;
 }
 .BackLink:hover {
@@ -17689,6 +17691,8 @@ button.Button--full {
   background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
   color: var(--colorsTextDefault, #141414);
+  font-size: 16px;
+  line-height: normal;
   text-align: left;
 }
 
@@ -23821,10 +23825,10 @@ button.Button--full {
   color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  font-weight: 700;
   font-family: "Sofia Pro", SofiaPro, sans-serif;
-  line-height: 1.25;
   font-size: 20px;
+  font-weight: 700;
+  line-height: 1.25;
   margin: 0 0 8px 0;
 }
 .Headline.Headline--xlarge {
@@ -24688,6 +24692,7 @@ button.a-Icon svg {
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
+  position: relative;
 }
 .Modal:focus {
   outline: none;
@@ -24855,6 +24860,7 @@ button.a-Icon svg {
 .OptionList__option {
   padding-right: 16px;
   border-radius: 3px;
+  line-height: normal;
   display: flex;
   position: relative;
   /* Center vertical alignment of OptionList Checkboxes */
@@ -24862,7 +24868,6 @@ button.a-Icon svg {
 .OptionList__option .Checkbox__label {
   font-size: 14px;
   font-weight: 400;
-  padding: 8px 0;
   width: 100%;
 }
 .OptionList__option .a-Checkbox {
@@ -24870,12 +24875,14 @@ button.a-Icon svg {
 }
 .OptionList__option .Checkbox__html-label {
   align-items: center;
+  padding: 8px 0;
 }
 .OptionList__option .Checkbox__box {
   top: 0;
 }
 
 .OptionList__header {
+  line-height: normal;
   padding-bottom: 8px;
   padding-left: 16px;
 }
@@ -26215,6 +26222,7 @@ button.a-Icon svg {
   box-sizing: border-box;
   color: var(--colorsTextInverted, #ffffff);
   display: inline-flex;
+  font-size: 16px;
   align-items: center;
   /** Material's width limit. Soft rule against long copy in this pattern. */
   max-width: 568px;
@@ -27256,7 +27264,7 @@ button.a-Icon svg {
   background-color: #e13212;
 }
 .Tag.Tag--warning {
-  background-color: #df7600;
+  background-color: #7a2f00;
 }
 .Tag.Tag--success {
   background-color: #18a761;
@@ -27283,7 +27291,7 @@ button.a-Icon svg {
   color: #bf2a00;
 }
 .Tag.Tag--subtle.Tag--warning {
-  background-color: #fff2dc;
+  background-color: #ffeccc;
   color: #444445;
 }
 .Tag.Tag--subtle.Tag--success {
@@ -27318,6 +27326,7 @@ button.a-Icon svg {
 }
 .Tag .Tag__icon {
   padding-left: 6px;
+  line-height: normal;
   margin-right: -0.2em;
 }
 .Tag--compact.Tag .Tag__icon {
@@ -27401,7 +27410,7 @@ button.a-Icon svg {
 }
 
 .Tag--warning.Tag .Tag__close.Button:hover {
-  background-color: #ac5b00;
+  background-color: #471b00;
 }
 
 .Tag--success.Tag .Tag__close.Button:hover {
@@ -27426,7 +27435,7 @@ button.a-Icon svg {
 }
 
 .Tag--subtle.Tag--warning.Tag .Tag__close.Button:hover {
-  background-color: rgba(172, 91, 0, 0.2);
+  background-color: rgba(71, 27, 0, 0.2);
 }
 
 .Tag--subtle.Tag--success.Tag .Tag__close.Button:hover {
@@ -27848,6 +27857,10 @@ button.a-Icon svg {
   opacity: 1;
 }
 
+.TimePicker__options [role=treeitem] {
+  scroll-margin: 8px;
+}
+
 .Toast {
   /* Set color on root of component. It can be overridden after the @include */
   color: var(--colorsTextDefault, #141414);
@@ -28187,6 +28200,9 @@ button.a-Icon svg {
   transition-delay: duration(slow);
 }
 
+.Tooltip__body {
+  line-height: normal;
+}
 .Tooltip__body:not(.Tooltip__body--open).Tooltip__body, .Tooltip__body:not(.Tooltip__body--open)::before {
   display: none;
   opacity: 0;
@@ -28289,11 +28305,11 @@ _:-ms-lang(x), .Tooltip__body {
 }
 
 .bg-orange {
-  background-color: #ff9116;
+  background-color: #e46f00;
 }
 
 .bg-orange-i {
-  background-color: #ff9116 !important;
+  background-color: #e46f00 !important;
 }
 
 .bg-yellow {
@@ -28561,51 +28577,51 @@ _:-ms-lang(x), .Tooltip__body {
 }
 
 .bg-orange-100 {
-  background-color: #fff2dc;
+  background-color: #ffeccc;
 }
 
 .bg-orange-100-i {
-  background-color: #fff2dc !important;
+  background-color: #ffeccc !important;
 }
 
 .bg-orange-200 {
-  background-color: #ffcc80;
+  background-color: #fdd291;
 }
 
 .bg-orange-200-i {
-  background-color: #ffcc80 !important;
+  background-color: #fdd291 !important;
 }
 
 .bg-orange-300 {
-  background-color: #ffa23a;
+  background-color: #ffa037;
 }
 
 .bg-orange-300-i {
-  background-color: #ffa23a !important;
+  background-color: #ffa037 !important;
 }
 
 .bg-orange-400 {
-  background-color: #ff9116;
+  background-color: #e46f00;
 }
 
 .bg-orange-400-i {
-  background-color: #ff9116 !important;
+  background-color: #e46f00 !important;
 }
 
 .bg-orange-500 {
-  background-color: #ee8400;
+  background-color: #b14c00;
 }
 
 .bg-orange-500-i {
-  background-color: #ee8400 !important;
+  background-color: #b14c00 !important;
 }
 
 .bg-orange-600 {
-  background-color: #df7600;
+  background-color: #7a2f00;
 }
 
 .bg-orange-600-i {
-  background-color: #df7600 !important;
+  background-color: #7a2f00 !important;
 }
 
 .bg-yellow-100 {
@@ -29233,11 +29249,11 @@ _:-ms-lang(x), .Tooltip__body {
 }
 
 .c-orange {
-  color: #ff9116;
+  color: #e46f00;
 }
 
 .c-orange-i {
-  color: #ff9116 !important;
+  color: #e46f00 !important;
 }
 
 .c-yellow {
@@ -29505,51 +29521,51 @@ _:-ms-lang(x), .Tooltip__body {
 }
 
 .c-orange-100 {
-  color: #fff2dc;
+  color: #ffeccc;
 }
 
 .c-orange-100-i {
-  color: #fff2dc !important;
+  color: #ffeccc !important;
 }
 
 .c-orange-200 {
-  color: #ffcc80;
+  color: #fdd291;
 }
 
 .c-orange-200-i {
-  color: #ffcc80 !important;
+  color: #fdd291 !important;
 }
 
 .c-orange-300 {
-  color: #ffa23a;
+  color: #ffa037;
 }
 
 .c-orange-300-i {
-  color: #ffa23a !important;
+  color: #ffa037 !important;
 }
 
 .c-orange-400 {
-  color: #ff9116;
+  color: #e46f00;
 }
 
 .c-orange-400-i {
-  color: #ff9116 !important;
+  color: #e46f00 !important;
 }
 
 .c-orange-500 {
-  color: #ee8400;
+  color: #b14c00;
 }
 
 .c-orange-500-i {
-  color: #ee8400 !important;
+  color: #b14c00 !important;
 }
 
 .c-orange-600 {
-  color: #df7600;
+  color: #7a2f00;
 }
 
 .c-orange-600-i {
-  color: #df7600 !important;
+  color: #7a2f00 !important;
 }
 
 .c-yellow-100 {
@@ -33558,6 +33574,70 @@ _:-ms-lang(x), .Tooltip__body {
   position: sticky !important;
 }
 
+.position-t-auto {
+  top: auto;
+}
+
+.position-t-auto-i {
+  top: auto !important;
+}
+
+.position-r-auto {
+  right: auto;
+}
+
+.position-r-auto-i {
+  right: auto !important;
+}
+
+.position-b-auto {
+  bottom: auto;
+}
+
+.position-b-auto-i {
+  bottom: auto !important;
+}
+
+.position-l-auto {
+  left: auto;
+}
+
+.position-l-auto-i {
+  left: auto !important;
+}
+
+.top-auto {
+  top: auto;
+}
+
+.top-auto-i {
+  top: auto !important;
+}
+
+.right-auto {
+  right: auto;
+}
+
+.right-auto-i {
+  right: auto !important;
+}
+
+.bottom-auto {
+  bottom: auto;
+}
+
+.bottom-auto-i {
+  bottom: auto !important;
+}
+
+.left-auto {
+  left: auto;
+}
+
+.left-auto-i {
+  left: auto !important;
+}
+
 .position-t-0 {
   top: 0;
 }
@@ -33590,36 +33670,100 @@ _:-ms-lang(x), .Tooltip__body {
   left: 0 !important;
 }
 
-.position-t-auto {
-  top: auto;
+.top-0 {
+  top: 0;
 }
 
-.position-t-auto-i {
-  top: auto !important;
+.top-0-i {
+  top: 0 !important;
 }
 
-.position-r-auto {
-  right: auto;
+.right-0 {
+  right: 0;
 }
 
-.position-r-auto-i {
-  right: auto !important;
+.right-0-i {
+  right: 0 !important;
 }
 
-.position-b-auto {
-  bottom: auto;
+.bottom-0 {
+  bottom: 0;
 }
 
-.position-b-auto-i {
-  bottom: auto !important;
+.bottom-0-i {
+  bottom: 0 !important;
 }
 
-.position-l-auto {
-  left: auto;
+.left-0 {
+  left: 0;
 }
 
-.position-l-auto-i {
-  left: auto !important;
+.left-0-i {
+  left: 0 !important;
+}
+
+.top-50 {
+  top: 50%;
+}
+
+.top-50-i {
+  top: 50% !important;
+}
+
+.right-50 {
+  right: 50%;
+}
+
+.right-50-i {
+  right: 50% !important;
+}
+
+.bottom-50 {
+  bottom: 50%;
+}
+
+.bottom-50-i {
+  bottom: 50% !important;
+}
+
+.left-50 {
+  left: 50%;
+}
+
+.left-50-i {
+  left: 50% !important;
+}
+
+.top-100 {
+  top: 100%;
+}
+
+.top-100-i {
+  top: 100% !important;
+}
+
+.right-100 {
+  right: 100%;
+}
+
+.right-100-i {
+  right: 100% !important;
+}
+
+.bottom-100 {
+  bottom: 100%;
+}
+
+.bottom-100-i {
+  bottom: 100% !important;
+}
+
+.left-100 {
+  left: 100%;
+}
+
+.left-100-i {
+  left: 100% !important;
 }
 
 .ta-left {
@@ -33817,6 +33961,382 @@ _:-ms-lang(x), .Tooltip__body {
 .z-drawer-i {
   z-index: 1100 !important;
 }
+
+.transform-none {
+  transform: none;
+}
+
+.transform-none-i {
+  transform: none !important;
+}
+
+.translate-x-0 {
+  --transform-translate-x: 0;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-y-0 {
+  --transform-translate-y: 0;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-x-0-i {
+  --transform-translate-x: 0;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-y-0-i {
+  --transform-translate-y: 0;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-x-50 {
+  --transform-translate-x: 50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-y-50 {
+  --transform-translate-y: 50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-x-50-i {
+  --transform-translate-x: 50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-y-50-i {
+  --transform-translate-y: 50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-x-100 {
+  --transform-translate-x: 100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-y-100 {
+  --transform-translate-y: 100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-x-100-i {
+  --transform-translate-x: 100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-y-100-i {
+  --transform-translate-y: 100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-x--50 {
+  --transform-translate-x: -50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-y--50 {
+  --transform-translate-y: -50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-x--50-i {
+  --transform-translate-x: -50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-y--50-i {
+  --transform-translate-y: -50%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-x--100 {
+  --transform-translate-x: -100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-y--100 {
+  --transform-translate-y: -100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0));
+}
+
+.translate-x--100-i {
+  --transform-translate-x: -100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.translate-y--100-i {
+  --transform-translate-y: -100%;
+  transform: translate(var(--transform-translate-x, 0), var(--transform-translate-y, 0)) !important;
+}
+
+.row-gap-0 {
+  row-gap: 0;
+}
+
+.row-gap-0-i {
+  row-gap: 0 !important;
+}
+
+.column-gap-0 {
+  -moz-column-gap: 0;
+  column-gap: 0;
+}
+
+.column-gap-0-i {
+  -moz-column-gap: 0 !important;
+  column-gap: 0 !important;
+}
+
+.gap-0 {
+  gap: 0;
+}
+
+.gap-0-i {
+  gap: 0 !important;
+}
+
+.row-gap-1 {
+  row-gap: 8px;
+}
+
+.row-gap-1-i {
+  row-gap: 8px !important;
+}
+
+.column-gap-1 {
+  -moz-column-gap: 8px;
+  column-gap: 8px;
+}
+
+.column-gap-1-i {
+  -moz-column-gap: 8px !important;
+  column-gap: 8px !important;
+}
+
+.gap-1 {
+  gap: 8px;
+}
+
+.gap-1-i {
+  gap: 8px !important;
+}
+
+.row-gap-2 {
+  row-gap: 16px;
+}
+
+.row-gap-2-i {
+  row-gap: 16px !important;
+}
+
+.column-gap-2 {
+  -moz-column-gap: 16px;
+  column-gap: 16px;
+}
+
+.column-gap-2-i {
+  -moz-column-gap: 16px !important;
+  column-gap: 16px !important;
+}
+
+.gap-2 {
+  gap: 16px;
+}
+
+.gap-2-i {
+  gap: 16px !important;
+}
+
+.row-gap-3 {
+  row-gap: 24px;
+}
+
+.row-gap-3-i {
+  row-gap: 24px !important;
+}
+
+.column-gap-3 {
+  -moz-column-gap: 24px;
+  column-gap: 24px;
+}
+
+.column-gap-3-i {
+  -moz-column-gap: 24px !important;
+  column-gap: 24px !important;
+}
+
+.gap-3 {
+  gap: 24px;
+}
+
+.gap-3-i {
+  gap: 24px !important;
+}
+
+.row-gap-4 {
+  row-gap: 32px;
+}
+
+.row-gap-4-i {
+  row-gap: 32px !important;
+}
+
+.column-gap-4 {
+  -moz-column-gap: 32px;
+  column-gap: 32px;
+}
+
+.column-gap-4-i {
+  -moz-column-gap: 32px !important;
+  column-gap: 32px !important;
+}
+
+.gap-4 {
+  gap: 32px;
+}
+
+.gap-4-i {
+  gap: 32px !important;
+}
+
+.row-gap-5 {
+  row-gap: 48px;
+}
+
+.row-gap-5-i {
+  row-gap: 48px !important;
+}
+
+.column-gap-5 {
+  -moz-column-gap: 48px;
+  column-gap: 48px;
+}
+
+.column-gap-5-i {
+  -moz-column-gap: 48px !important;
+  column-gap: 48px !important;
+}
+
+.gap-5 {
+  gap: 48px;
+}
+
+.gap-5-i {
+  gap: 48px !important;
+}
+
+.row-gap-6 {
+  row-gap: 64px;
+}
+
+.row-gap-6-i {
+  row-gap: 64px !important;
+}
+
+.column-gap-6 {
+  -moz-column-gap: 64px;
+  column-gap: 64px;
+}
+
+.column-gap-6-i {
+  -moz-column-gap: 64px !important;
+  column-gap: 64px !important;
+}
+
+.gap-6 {
+  gap: 64px;
+}
+
+.gap-6-i {
+  gap: 64px !important;
+}
+
+.row-gap-7 {
+  row-gap: 96px;
+}
+
+.row-gap-7-i {
+  row-gap: 96px !important;
+}
+
+.column-gap-7 {
+  -moz-column-gap: 96px;
+  column-gap: 96px;
+}
+
+.column-gap-7-i {
+  -moz-column-gap: 96px !important;
+  column-gap: 96px !important;
+}
+
+.gap-7 {
+  gap: 96px;
+}
+
+.gap-7-i {
+  gap: 96px !important;
+}
+
+.row-gap-8 {
+  row-gap: 128px;
+}
+
+.row-gap-8-i {
+  row-gap: 128px !important;
+}
+
+.column-gap-8 {
+  -moz-column-gap: 128px;
+  column-gap: 128px;
+}
+
+.column-gap-8-i {
+  -moz-column-gap: 128px !important;
+  column-gap: 128px !important;
+}
+
+.gap-8 {
+  gap: 128px;
+}
+
+.gap-8-i {
+  gap: 128px !important;
+}
+
+.row-gap-half {
+  row-gap: 4px;
+}
+
+.row-gap-half-i {
+  row-gap: 4px !important;
+}
+
+.column-gap-half {
+  -moz-column-gap: 4px;
+  column-gap: 4px;
+}
+
+.column-gap-half-i {
+  -moz-column-gap: 4px !important;
+  column-gap: 4px !important;
+}
+
+.gap-half {
+  gap: 4px;
+}
+
+.gap-half-i {
+  gap: 4px !important;
+}
+
+.gap-normal {
+  gap: normal;
+}
+
+.gap-normal-i {
+  gap: normal !important;
+}
 .Overlay {
   position: fixed;
   top: 0;