@servicetitan/design-system 11.4.0 → 11.5.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: "11.4.0";
+  --anvil-version: "11.5.0";
 }
 
 /*
@@ -87,7 +87,7 @@ a:focus {
 
 .a-Checkbox {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -310,7 +310,7 @@ span.Popover {
 
 .Popover__body {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   background: var(--colorsSurfaceDefault, #ffffff);
@@ -15009,7 +15009,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .semantic-anvil-theme {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   /*
@@ -16417,7 +16417,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .ActionMenu {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   padding: 12px 0;
@@ -16512,7 +16512,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Announcement {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   align-items: center;
@@ -16570,7 +16570,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 /* OptionList overrides specific to the Select */
 .a-Select {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -16662,7 +16662,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Trigger {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -16766,7 +16766,6 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   margin-right: 11px;
 }
 .Trigger--error .Trigger__shortLabel {
-  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
   color: var(--colorsTextCritical, #f94d32);
   border-color: var(--colorsBorderCritical, #e63717);
 }
@@ -16850,7 +16849,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Avatar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   align-items: center;
@@ -16923,7 +16922,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 /** @define Backdrop */
 .Backdrop {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: none;
@@ -16945,7 +16944,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 .BackLink {
   all: unset;
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   cursor: pointer;
@@ -16971,7 +16970,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Banner {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   background: #ffffff;
@@ -17083,8 +17082,8 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .Banner__close.a-Icon {
+  align-self: baseline;
   color: var(--colorsTextDefault, #141414);
-  cursor: pointer;
   font-size: 1.2em;
   margin-left: 24px;
   margin-top: 6px;
@@ -17092,7 +17091,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .BodyText {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-family: "Nunito Sans", sans-serif;
@@ -17118,7 +17117,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Breadcrumb {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -17167,7 +17166,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Button {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -17649,7 +17648,7 @@ button.Button--full {
 
 .Card {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   background: var(--colorsSurfaceDefault, #ffffff);
@@ -17880,7 +17879,7 @@ button.Button--full {
 
 .Collapsible {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -17896,7 +17895,7 @@ button.Button--full {
 
 .ColorPicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -17955,7 +17954,7 @@ button.Button--full {
 
 .Container {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: block;
@@ -18006,7 +18005,7 @@ button.Button--full {
 
 .DataList {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: table;
@@ -18063,7 +18062,7 @@ button.Button--full {
 
 .DatePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex-grow: 1;
@@ -18095,7 +18094,7 @@ button.Button--full {
 /* Kendo calendar styles */
 .DatePicker__calendar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -18164,7 +18163,7 @@ button.Button--full {
 
 .DateRangePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   width: -webkit-min-content;
@@ -18187,15 +18186,7 @@ button.Button--full {
 
 .DateRangePicker__actions {
   padding: 12px 16px;
-  border-top: 1px solid #dfe0e1;
-}
-
-.DateRangePicker__errorText {
-  color: #e63717;
-  font-size: 14px;
-  line-height: 1.25;
-  margin-top: 8px;
-  margin-bottom: 4px;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 .DateRangePicker__fromTo {
@@ -18205,7 +18196,7 @@ button.Button--full {
 }
 
 .DateRangePicker__header {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 16px;
   display: flex;
   justify-content: center;
@@ -18221,13 +18212,13 @@ button.Button--full {
 }
 
 .DateRangePicker__options {
-  border-right: 1px solid #dfe0e1;
+  border-right: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 16px;
 }
 
 .Divider {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   color: var(--colorsBorderGrey, #dfe0e1);
@@ -18240,7 +18231,7 @@ button.Button--full {
 }
 .Divider .Divider__content {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex: 0 0 auto;
@@ -18349,7 +18340,7 @@ button.Button--full {
 
 .Drawer {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   background-color: var(--colorsSurfaceDefault, #ffffff);
@@ -18438,7 +18429,7 @@ button.Button--full {
 
 .Eyebrow {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 600;
@@ -18463,7 +18454,7 @@ button.Button--full {
 
 .FilePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -18474,7 +18465,7 @@ button.Button--full {
 
 .FilePicker__File {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -18544,7 +18535,7 @@ button.Button--full {
 
 .FilterButton {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: inline-flex;
@@ -18809,7 +18800,7 @@ button.Button--full {
 
 .FormField__helpers {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -18893,7 +18884,7 @@ button.Button--full {
 .FormGroup {
   /* stylelint-enable */
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -19027,7 +19018,7 @@ button.Button--full {
 
 .Frame {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   height: 100vh;
@@ -19057,7 +19048,7 @@ button.Button--full {
 
 .Grid {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -24572,7 +24563,7 @@ button.Button--full {
 }
 .Headline {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 700;
@@ -24597,7 +24588,19 @@ button.Button--full {
   font-size: 16px;
 }
 
-.a-Icon {
+button.a-Icon {
+  all: unset;
+  cursor: pointer;
+  pointer-events: auto;
+}
+button.a-Icon:focus {
+  border-radius: 3px;
+  box-shadow: 0 0 0 2px var(--colorsFocusRingPrimary, #a9d1ff);
+  outline: 0;
+}
+
+.a-Icon,
+button.a-Icon {
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
   color: inherit;
@@ -24610,7 +24613,8 @@ button.Button--full {
   vertical-align: middle;
   width: auto;
 }
-.a-Icon svg {
+.a-Icon svg,
+button.a-Icon svg {
   vertical-align: bottom;
 }
 
@@ -24812,7 +24816,7 @@ button.Button--full {
 /*** Input styles ***/
 .Input {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -24992,7 +24996,7 @@ button.Button--full {
 .Input.Input--error:focus-within .InputAddon, .Input.Input--error.Input--focus .InputAddon {
   border-color: #e63717;
 }
-.Input.Input--error .InputAddon > i.a-Icon {
+.Input.Input--error .InputAddon > .a-Icon {
   color: #e63717;
 }
 .Input.Input--loading.Input--loading .Spinner {
@@ -25008,14 +25012,15 @@ button.Button--full {
   box-shadow: none !important;
   border-radius: 0 !important;
 }
-.Input > .Input__InnerWrapper i.a-Icon {
-  cursor: default;
-  color: #737475;
+.Input > .Input__InnerWrapper .a-Icon:not(button) {
   pointer-events: none;
+}
+.Input > .Input__InnerWrapper .a-Icon {
+  color: #737475;
   transition: opacity 0.3s ease;
   line-height: inherit;
 }
-.Input > .Input__InnerWrapper i.a-Icon svg {
+.Input > .Input__InnerWrapper .a-Icon svg {
   font-size: inherit;
   text-align: center;
   vertical-align: middle;
@@ -25056,6 +25061,9 @@ button.Button--full {
 .Input.Input--large > .Input__InnerWrapper > .InputAddon .a-Icon > svg {
   margin: -6px 0;
 }
+.Input.Input--large > .Input__InnerWrapper > .InputAddon button.a-Icon > svg {
+  margin: -4px 0 -1px;
+}
 .Input.Input--xsmall > .Input__InnerWrapper > .InputAddon *:not(input) {
   line-height: 12px;
 }
@@ -25139,7 +25147,7 @@ button.Button--full {
 }
 .Label, .Form label:not(.Field__html-label) {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   color: var(--colorsTextDefault, #141414);
@@ -25315,7 +25323,7 @@ button.Button--full {
 .Link {
   all: unset;
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   color: var(--colorsTextDefault, #141414);
@@ -25405,7 +25413,7 @@ button.Button--full {
 /** @define Modal */
 .Modal {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -25569,7 +25577,7 @@ button.Button--full {
 
 .OptionList {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -25727,7 +25735,7 @@ button.Button--full {
 
 .Page {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   background-color: var(--colorsAppBackground, #fcfcfc);
@@ -26109,7 +26117,7 @@ button.Button--full {
 
 .ProgressTracker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -26210,7 +26218,7 @@ button.Button--full {
 
 .a-Radio {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -26437,7 +26445,7 @@ button.Button--full {
 
 .Scroll__Scrollbar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   position: relative;
@@ -26721,7 +26729,7 @@ button.Button--full {
 
 .Sidebar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   z-index: 10;
@@ -26862,7 +26870,7 @@ button.Button--full {
 
 .SideNav {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -26913,7 +26921,7 @@ button.Button--full {
   outline: none;
 }
 .SideNavItem__button:hover, .SideNavItem__button.SideNavItem__button--focus-visible:focus {
-  background: var(--colorsHoverPrimary, rgba(236, 244, 253, 0.08));
+  background: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
   color: var(--colorsTextPrimary, #2270ee);
 }
 .SideNavItem--active .SideNavItem__button {
@@ -26941,7 +26949,7 @@ button.Button--full {
 
 .Snackbar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-animation: snackbarIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -27350,7 +27358,7 @@ button.Button--full {
 
 .StatusLight {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: inline-flex;
@@ -27478,7 +27486,7 @@ button.Button--full {
 .Tab {
   all: unset;
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -27626,7 +27634,7 @@ button.Button--full {
 
 .TabGroup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   list-style: none;
@@ -27726,7 +27734,7 @@ button.Button--full {
 
 .Table {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -27740,17 +27748,6 @@ button.Button--full {
 .Table .k-grid-header .k-grid-header-wrap {
   border-right-color: transparent;
 }
-.Table:not(.Table--striped) .k-alt,
-.Table:not(.Table--striped) .k-grid-content-sticky td {
-  background-color: transparent;
-}
-.Table:not(.Table--striped) .k-alt:hover,
-.Table:not(.Table--striped) .k-grid-content-sticky td:hover {
-  background-color: #f5f5f5;
-}
-.Table:not(.Table--striped) .k-master-row:not(:hover) {
-  background: transparent;
-}
 .Table.Table--master-detail > .k-grid-header colgroup > :first-child {
   display: none;
 }
@@ -27766,17 +27763,6 @@ button.Button--full {
 .Table.Table--master-detail > .k-grid-container > .k-grid-content > * > .k-grid-table > tbody > * > .k-hierarchy-cell {
   display: none;
 }
-.Table .k-state-selected td {
-  border-color: #d5e7fb;
-}
-.Table .k-state-selected:hover td {
-  background-color: #d5e7fb;
-}
-.Table .k-pager-wrap .k-state-selected {
-  background-color: #2270ee;
-  border-radius: 3px;
-  color: #ffffff;
-}
 .Table .k-grid-header .k-header {
   transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
 }
@@ -27791,7 +27777,7 @@ button.Button--full {
   bottom: 8px;
 }
 .Table .k-grid-header .k-header .k-icon.k-i-more-vertical {
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   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 {
@@ -27802,12 +27788,6 @@ button.Button--full {
 .Table .k-grid-header .k-header .k-grid-column-menu.k-grid-filter {
   border-radius: 3px;
 }
-.Table .k-grid-header .k-header.TableColumn--filter-active .k-grid-column-menu.k-grid-filter {
-  background-color: #2270ee;
-}
-.Table .k-grid-header .k-header.TableColumn--filter-active .k-grid-column-menu.k-grid-filter .k-icon.k-i-more-vertical {
-  color: #ffffff;
-}
 .Table .k-grid-header .k-header .k-link {
   font-weight: 400;
 }
@@ -27830,18 +27810,123 @@ button.Button--full {
 .Table .k-grid-content-sticky[style*="border-right-width: 1px;"] {
   box-shadow: 2px 3px 5px 0 rgba(4, 4, 4, 0.1);
 }
-.Table.Table--sortable .k-header:hover, .Table.Table--sortable th.k-header.k-sorted {
-  background-color: #eeeeee;
-}
 .Table .k-i-sort-asc-sm,
 .Table .k-i-sort-desc-sm {
   font-size: 18px;
 }
+.Table.k-grid {
+  border-color: var(--colorsBorderGrey, #dfe0e1);
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.Table.k-grid .k-grid-header {
+  color: var(--colorsTextOnGrey, #444445);
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.Table.k-grid .k-grid-header .k-grid-filter:hover,
+.Table.k-grid .k-grid-header .k-grid-header .k-header-column-menu:hover,
+.Table.k-grid .k-grid-header .k-grid-header .k-hierarchy-cell .k-icon:hover {
+  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
+}
+.Table.k-grid .k-grid-header .TableColumn--filter-active .k-grid-column-menu.k-grid-filter {
+  background-color: var(--colorsSurfacePrimary, #141414);
+}
+.Table.k-grid .k-grid-header .TableColumn--filter-active .k-grid-column-menu.k-grid-filter .k-icon.k-i-more-vertical {
+  color: var(--colorsTextOnPrimary, #ffffff);
+}
+.Table.k-grid .k-grid-header .k-i-sort-asc-sm,
+.Table.k-grid .k-grid-header .k-i-sort-desc-sm,
+.Table.k-grid .k-grid-header .k-sort-order {
+  color: var(--colorsTextPrimary, #2270ee);
+}
+.Table.k-grid tr.k-alt {
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.Table.k-grid:not(.Table--striped) tr.k-alt {
+  background-color: transparent;
+}
+.Table.k-grid:not(.Table--striped) tr.k-alt:hover {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid tr.k-alt.k-state-selected,
+.Table.k-grid tr.k-state-selected {
+  background-color: var(--colorsSurfacePrimarySubdued, #ecf4fd);
+}
+.Table.k-grid tr.k-alt.k-state-selected:hover,
+.Table.k-grid tr.k-state-selected:hover {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
+.Table.k-grid tbody tr.k-state-hover,
+.Table.k-grid tbody tr:hover {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid tbody tr.k-state-hover td,
+.Table.k-grid tbody tr:hover td {
+  background-color: inherit;
+}
+.Table.k-grid .k-master-row.k-state-hover .k-grid-content-sticky,
+.Table.k-grid .k-master-row.k-state-hover .k-grid-row-sticky,
+.Table.k-grid .k-master-row:hover .k-grid-content-sticky,
+.Table.k-grid .k-master-row:hover .k-grid-row-sticky,
+.Table.k-grid .k-alt .k-grid-content-sticky,
+.Table.k-grid .k-alt .k-grid-row-sticky {
+  background-color: inherit;
+}
+.Table.k-grid.Table--sortable .k-header:hover,
+.Table.k-grid.Table--sortable th.k-header.k-sorted {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid .k-grid-content {
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.Table.k-grid .k-checkbox {
+  border-color: var(--colorsBorderGreyStrong, #bcbcbd);
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.Table.k-grid .k-checkbox.k-checked, .Table.k-grid .k-checkbox:checked {
+  border-color: var(--colorsBorderPrimary, #2270ee);
+  color: var(--colorsTextOnPrimary, #ffffff);
+  background-color: var(--colorsSurfacePrimary, #2270ee);
+}
+.Table.k-grid .k-checkbox.k-state-focus, .Table.k-grid .k-checkbox:checked:focus, .Table.k-grid .k-checkbox:focus {
+  box-shadow: 0 0 0 4px var(--colorsFocusRingPrimary, #ecf4fd);
+}
+.Table.k-grid .k-filter-row > td,
+.Table.k-grid .k-filter-row > th,
+.Table.k-grid td,
+.Table.k-grid .k-grid-content-locked,
+.Table.k-grid .k-grid-footer,
+.Table.k-grid .k-grid-footer-locked,
+.Table.k-grid .k-grid-footer-wrap,
+.Table.k-grid .k-grid-header,
+.Table.k-grid .k-grid-header-locked,
+.Table.k-grid .k-grid-header-wrap,
+.Table.k-grid .k-grouping-header,
+.Table.k-grid .k-grouping-header .k-group-indicator,
+.Table.k-grid .k-header,
+.Table.k-grid th.k-header {
+  border-color: var(--colorsBorderGrey, #dfe0e1);
+}
+.Table.k-grid .k-pager-wrap {
+  color: var(--colorsTextOnGrey, #444445);
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.Table.k-grid .k-pager-wrap .k-state-selected {
+  background-color: var(--colorsSurfacePrimary, #141414);
+  border-radius: 3px;
+  color: var(--colorsTextOnPrimary, #ffffff);
+}
+.Table.k-grid .k-pager-wrap .k-pager-nav.k-link:hover,
+.Table.k-grid .k-pager-wrap .k-pager-refresh:hover,
+.Table.k-grid .k-pager-wrap .k-state-hover.k-pager-nav.k-link,
+.Table.k-grid .k-pager-wrap .k-state-hover.k-pager-refresh {
+  color: var(--colorsTextOnGrey, #444445);
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
 
 /* Filter popups are rendered outside .Table in portal */
 .k-popup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -27861,7 +27946,7 @@ button.Button--full {
 
 .Tag {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   border-radius: 3px;
@@ -28111,7 +28196,7 @@ button.Button--full {
 
 .Takeover {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -28252,7 +28337,7 @@ button.Button--full {
 
 .Text {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 400;
@@ -28266,7 +28351,7 @@ button.Button--full {
 .TextArea {
   /* Variables */
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -28356,7 +28441,7 @@ button.Button--full {
 
 .Thumbnail {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -28432,7 +28517,7 @@ button.Button--full {
 
 .TimePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex-grow: 1;
@@ -28464,7 +28549,7 @@ button.Button--full {
 
 .Toast {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   background: var(--colorsSurfaceDefault, #ffffff);
@@ -28553,7 +28638,7 @@ button.Button--full {
 
 .ToastGroup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -28662,7 +28747,7 @@ button.Button--full {
 
 .ToggleSwitch {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
@@ -28773,7 +28858,7 @@ button.Button--full {
 .Tooltip,
 .Tooltip__body {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }