@servicetitan/design-system 10.1.0 → 10.3.0

package/dist/components/index.css

@@ -1,9 +1,9 @@
-@charset "UTF-8";
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 /** Popover Variables */
 .Popover__body.Popover__body {
   display: none;
   pointer-events: none;
+  overflow: hidden;
 }
 
 .Popover__body.Popover__body--open {
@@ -146,7 +146,6 @@ span.Popover {
 
 .ActionMenu__OverlayWrapper.Popover__body {
   border: none;
-  box-shadow: 0 2px 8px rgba(127, 127, 127, 0.1), 0 8px 24px rgba(127, 127, 127, 0.1);
   min-width: 192px;
   width: auto;
 }
@@ -171,12 +170,12 @@ span.Popover {
 .ActionMenu .ActionMenuGroup__label,
 .ActionMenu .ActionMenuGroup__divider,
 .ActionMenu .ActionMenuItem {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   list-style: none;
 }
 .ActionMenu .ActionMenuItem {
   align-items: center;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   display: flex;
   flex-direction: row;
   min-height: 26px;
@@ -185,7 +184,7 @@ span.Popover {
   outline: 0;
 }
 .ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled), .ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled), .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus {
-  background: #2270ee;
+  background: var(--colorsSurfacePrimary, #2270ee);
   cursor: pointer;
 }
 .ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__content > .Headline,
@@ -201,10 +200,10 @@ span.Popover {
 .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .Eyebrow,
 .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content > .Text,
 .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__content {
-  color: #ffffff;
+  color: var(--colorsTextOnPrimary, #ffffff);
 }
 .ActionMenu .ActionMenuItem.ActionMenuItem--active:not(.ActionMenuItem--disabled) .ActionMenuItem__icon .a-Icon > svg, .ActionMenu .ActionMenuItem:hover:not(.ActionMenuItem--disabled) .ActionMenuItem__icon .a-Icon > svg, .ActionMenu .ActionMenuItem.ActionMenuItem--focus-visible:focus .ActionMenuItem__icon .a-Icon > svg {
-  fill: #ffffff !important;
+  fill: var(--colorsTextOnPrimary, #ffffff) !important;
 }
 .ActionMenu .ActionMenuItem .ActionMenuItem__icon,
 .ActionMenu .ActionMenuItem .ActionMenuItem__content {
@@ -242,7 +241,7 @@ span.Popover {
   margin-right: 8px;
 }
 .ActionMenuGroup__label.Divider .Eyebrow {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   opacity: 0.6;
 }
 
@@ -262,22 +261,21 @@ span.Popover {
 }
 
 .Announcement--info {
-  background-color: #2270ee;
-  color: #ffffff;
+  background-color: var(--colorsStatusInfo, #2270ee);
+  color: var(--colorsTextOnPrimary, #ffffff);
 }
 
 .Announcement--critical {
-  background-color: #bf2a00;
-  color: #ffffff;
+  background-color: var(--colorsStatusCriticalStrong, #bf2a00);
+  color: var(--colorsTextOnCritical, #ffffff);
 }
 
 .Announcement--warning {
-  background-color: #ffc902;
-  color: #2d2e31;
+  background-color: var(--colorsStatusWarning, #ffbe00);
+  color: var(--colorsTextOnWarning, #141414);
 }
 
 .Announcement__action.Button {
-  box-shadow: 0 2px 8px rgba(20, 20, 20, 0.1);
   margin: 0 0 0 16px;
   white-space: nowrap;
 }
@@ -304,9 +302,6 @@ span.Popover {
   background-color: transparent;
 }
 
-/*
-	†: A style that is tied to Semantic Select & Input
-*/
 /* OptionList overrides specific to the Select */
 .a-Select {
   /* Set color on root of component. It can be overridden after the @include */
@@ -377,36 +372,6 @@ span.Popover {
   margin-bottom: -8px;
 }
 
-.Select__option--disabled {
-  pointer-events: none;
-}
-.Select__option--disabled .Checkbox__label,
-.Select__option--disabled .Radio__label {
-  color: #737475;
-}
-
-.Select__secondary-action {
-  align-self: center;
-  margin-left: auto;
-  margin-right: 4px;
-  background: linear-gradient(to left, #eeeeee 70%, #eeeeee 71%, rgba(238, 238, 238, 0) 100%);
-  opacity: 0;
-  position: absolute;
-  right: 4px;
-  top: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  padding-left: 24px;
-  z-index: 2;
-}
-.Select__option--single .Checkbox--checked + .Select__secondary-action {
-  background: linear-gradient(to left, #ecf4fd 70%, #ecf4fd 71%, rgba(236, 244, 253, 0) 100%);
-}
-.OptionList__option:hover .Select__secondary-action {
-  opacity: 1;
-}
-
 /* Variables */
 /* Form Sizes */
 .Form--mini {
@@ -1005,11 +970,11 @@ span.Popover {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   align-items: center;
-  background-color: #eeeeee;
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
   border: 0;
   border-radius: 3px;
   box-sizing: border-box;
-  color: #444445;
+  color: var(--colorsTextOnGrey, #444445);
   cursor: pointer;
   display: inline-flex;
   font-size: 16px;
@@ -1031,7 +996,7 @@ span.Popover {
   position: absolute;
   width: 100%;
   height: 100%;
-  border-radius: 3px;
+  border-radius: inherit;
   top: 0;
   left: 0;
 }
@@ -1039,36 +1004,36 @@ span.Popover {
   text-decoration: none;
 }
 .Button:hover::before {
-  background-color: rgba(20, 20, 20, 0.08);
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
 }
 .Button:active::before, .Button.Button--selected::before {
-  background-color: rgba(20, 20, 20, 0.16);
+  background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
 }
 .Button.Button--focus-visible:focus {
   outline: 0;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 .Button.Button--outline {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px currentColor;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445);
 }
 .Button.Button--outline:hover::before {
-  background-color: rgba(20, 20, 20, 0.08);
+  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
 }
 .Button.Button--outline:active::before, .Button.Button--outline.Button--selected::before {
-  background-color: rgba(20, 20, 20, 0.2);
+  background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
 }
 .Button.Button--outline.Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px #1360d9, 0 0 0 3px #a9d1ff;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445), 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 .Button.Button--subtle {
   background-color: transparent;
 }
 .Button.Button--subtle:hover::before {
-  background-color: rgba(20, 20, 20, 0.08);
+  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
 }
 .Button.Button--subtle:active::before, .Button.Button--subtle.Button--selected::before {
-  background-color: rgba(20, 20, 20, 0.2);
+  background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
 }
 
 button.Button {
@@ -1104,80 +1069,85 @@ button.Button {
 }
 
 .Button--grey:hover, .Button--grey:active, .Button--grey.Button--selected, .Button--grey:focus, .Button--grey:focus:active {
-  color: #444445;
+  color: var(--colorsTextOnGrey, #444445);
 }
 
 .Button--blue {
-  background-color: #2270ee;
-  color: #ffffff;
+  background-color: var(--colorsSurfacePrimary, #2270ee);
+  color: var(--colorsTextOnPrimary, #ffffff);
 }
 .Button--blue:hover::before {
-  background-color: rgba(255, 255, 255, 0.16);
+  background-color: var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16));
 }
 .Button--blue:active::before, .Button--blue.Button--selected::before {
-  background-color: rgba(20, 20, 20, 0.08);
+  background-color: var(--colorsActiveOnPrimary, rgba(20, 20, 20, 0.08));
 }
 .Button--blue.Button--outline {
   background-color: transparent;
-  color: #2270ee;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #2270ee);
+  color: var(--colorsTextPrimary, #2270ee);
 }
 .Button--blue.Button--outline:hover::before {
-  background-color: rgba(34, 112, 238, 0.08);
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
+.Button--blue.Button--outline.Button--focus-visible:focus {
+  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #2270ee), 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 .Button--blue.Button--outline:active::before, .Button--blue.Button--outline.Button--selected::before {
-  background-color: rgba(0, 76, 195, 0.2);
+  background-color: var(--colorsActivePrimary, rgba(0, 76, 195, 0.2));
 }
 .Button--blue.Button--subtle {
   background-color: transparent;
-  color: #2270ee;
+  color: var(--colorsTextPrimary, #2270ee);
 }
 .Button--blue.Button--subtle:hover::before {
-  background-color: rgba(34, 112, 238, 0.08);
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
 }
 .Button--blue.Button--subtle:active::before, .Button--blue.Button--subtle.Button--selected::before {
-  background-color: rgba(0, 76, 195, 0.2);
+  background-color: var(--colorsActivePrimary, rgba(0, 76, 195, 0.2));
 }
 
 .Button--red {
-  background-color: #e63717;
-  color: #ffffff;
+  background-color: var(--colorsSurfaceCritical, #e63717);
+  color: var(--colorsTextOnCritical, #ffffff);
 }
 .Button--red:hover::before {
-  background-color: rgba(255, 255, 255, 0.16);
+  background-color: var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16));
 }
 .Button--red:active::before, .Button--red.Button--selected::before {
-  background-color: rgba(20, 20, 20, 0.16);
+  background-color: var(--colorsActiveOnCritical, rgba(20, 20, 20, 0.16));
 }
 .Button--red.Button--focus-visible:focus {
-  box-shadow: 0 0 0 3px #ffb2a0;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
 }
 .Button--red.Button--outline {
   background-color: transparent;
-  color: #e63717;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717);
+  color: var(--colorsTextCritical, #e63717);
 }
 .Button--red.Button--outline:hover::before {
-  background-color: rgba(230, 55, 23, 0.1);
+  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
 }
 .Button--red.Button--outline:active::before, .Button--red.Button--outline.Button--selected::before {
-  background-color: rgba(230, 55, 23, 0.3);
+  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.3));
 }
 .Button--red.Button--outline.Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px #e63717, 0 0 0 3px #ffb2a0;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
 }
 .Button--red.Button--subtle {
   background-color: transparent;
-  color: #e63717;
+  color: var(--colorsTextCritical, #e63717);
 }
 .Button--red.Button--subtle:hover::before {
-  background-color: rgba(230, 55, 23, 0.1);
+  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
 }
 .Button--red.Button--subtle:active::before, .Button--red.Button--subtle.Button--selected::before {
-  background-color: rgba(230, 55, 23, 0.3);
+  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.3));
 }
 
 .Button--disabled, .Button--disabled.Button--outline, .Button--disabled.Button--subtle {
-  background: #eeeeee;
-  color: #444445;
+  background: var(--colorsSurfaceGrey, #eeeeee);
+  color: var(--colorsTextOnGrey, #444445);
   opacity: 0.4;
 }
 .Button--disabled svg, .Button--disabled.Button--outline svg, .Button--disabled.Button--subtle svg {
@@ -1186,6 +1156,9 @@ button.Button {
 .Button--disabled.Button--outline, .Button--disabled.Button--subtle {
   background: transparent;
 }
+.Button--disabled.Button--outline {
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445);
+}
 
 .Button--inactive {
   pointer-events: none;
@@ -8530,6 +8503,9 @@ button.Button--full {
 .InlineEdit.InlineEdit--fluid > .InlineEdit__control {
   flex-grow: 1;
 }
+.InlineEdit .Trigger {
+  min-width: 192px;
+}
 
 .InlineEdit__content {
   overflow: auto;
@@ -8604,6 +8580,10 @@ button.Button--full {
   border-bottom-color: #f94d32;
 }
 
+.InlineEdit__value--placeholder {
+  color: rgba(20, 20, 20, 0.4);
+}
+
 .InlineEdit__content--icon .InlineEdit__editIcon {
   display: inline-block;
 }
@@ -9671,6 +9651,7 @@ button.Button--full {
   flex-direction: column;
   flex: 0 0 auto;
   overflow: visible;
+  z-index: 799;
 }
 
 .Page--no-padding .Page__page {
@@ -9734,16 +9715,15 @@ button.Button--full {
   box-sizing: border-box;
   align-items: center;
   display: flex;
+  z-index: 798;
 }
 @media (min-width: 480px) {
   .Page__actionToolbar {
     padding: 12px 48px;
   }
 }
-
-.Page__actionToolbar--sticky {
+.Page__actionToolbar.Page__actionToolbar--sticky {
   position: sticky;
-  z-index: 990;
   top: 0;
 }
 
@@ -9939,6 +9919,16 @@ button.Button--full {
   background: #ffc902;
 }
 
+.ProgressBar--blue-grey::-webkit-progress-value {
+  background: #8c9ca5;
+}
+.ProgressBar--blue-grey::-moz-progress-bar {
+  background: #8c9ca5;
+}
+.ProgressBar--blue-grey .ProgressBar__value {
+  background: #8c9ca5;
+}
+
 /** Size Variants */
 .ProgressBar--small,
 .ProgressBar--small .ProgressBar__bar,
@@ -11558,13 +11548,13 @@ button.Button--full {
   transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
 }
 .Table .k-grid-header .k-header .k-icon.k-i-more-vertical::before {
-  content: "";
+  content: "\e129";
 }
 .Table .k-grid-header .k-header .k-icon.k-i-more-vertical:hover {
   background: rgba(20, 20, 20, 0.1);
   color: #444445;
 }
-.Table .k-grid-header .k-header.TableColumn--has-menu a.k-link {
+.Table .k-grid-header .k-header.TableColumn--has-menu .k-link {
   padding-right: 26px;
 }
 .Table .k-grid-header .k-header.TableColumn--filter-active .k-icon.k-i-more-vertical {
@@ -11611,13 +11601,12 @@ button.Button--full {
   font-size: 92%;
   font-weight: bold;
   opacity: 0.65;
-  vertical-align: middle;
 }
 .k-popup .k-i-arrow-s::before {
-  content: "˅";
+  content: url("data:image/svg+xml; utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' viewBox='0 0 24 24' width='16px' fill='%23000000'%3E%3Cpath d='M24 24H0V0h24v24z' fill='none' opacity='.87'/%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'/%3E%3C/svg%3E");
 }
 .k-popup .k-i-arrow-n::before {
-  content: "˄";
+  content: url("data:image/svg+xml; utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' viewBox='0 0 24 24' width='16px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z'/%3E%3C/svg%3E%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z'/%3E%3C/svg%3E");
 }
 
 .Tag {
@@ -12176,15 +12165,12 @@ button.Button--full {
   line-height: 1.5;
   padding: 24px;
   width: 375px;
-}
-
-.Toast__header {
-  display: flex;
+  position: relative;
 }
 
 .Toast__title {
   font-weight: 600;
-  flex: 1;
+  word-break: break-word;
 }
 .Toast--info .Toast__title {
   color: #2270ee;
@@ -12237,10 +12223,9 @@ button.Button--full {
 }
 
 .Toast__close.Button {
-  margin-left: 24px;
-  margin-right: -4px;
-  margin-top: -2px;
-  margin-bottom: auto;
+  position: absolute;
+  right: calc(24px - 4px);
+  top: calc(24px - 2px);
 }
 .Toast__close.Button:hover {
   background-color: transparent;