@servicetitan/design-system 11.4.1 → 11.4.2

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.1";
+  --anvil-version: "11.4.2";
 }
 
 /*
@@ -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;
@@ -16849,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;
@@ -16922,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;
@@ -16944,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;
@@ -16970,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;
@@ -17082,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;
@@ -17091,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;
@@ -17117,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;
@@ -17166,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;
@@ -17648,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);
@@ -17879,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;
 }
@@ -17895,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;
@@ -17954,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;
@@ -18005,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;
@@ -18062,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;
@@ -18094,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;
@@ -18163,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;
@@ -18218,7 +18218,7 @@ button.Button--full {
 
 .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);
@@ -18231,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;
@@ -18340,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);
@@ -18429,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;
@@ -18454,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;
 }
@@ -18465,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;
@@ -18535,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;
@@ -18800,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;
 }
@@ -18884,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;
@@ -19018,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;
@@ -19048,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;
@@ -24563,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;
@@ -24588,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;
@@ -24601,7 +24613,8 @@ button.Button--full {
   vertical-align: middle;
   width: auto;
 }
-.a-Icon svg {
+.a-Icon svg,
+button.a-Icon svg {
   vertical-align: bottom;
 }
 
@@ -24803,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;
@@ -24983,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 {
@@ -24999,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;
@@ -25047,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;
 }
@@ -25130,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);
@@ -25306,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);
@@ -25396,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;
@@ -25560,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;
 }
@@ -25718,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);
@@ -26100,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;
@@ -26201,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;
@@ -26428,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;
@@ -26712,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;
@@ -26853,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;
@@ -26932,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);
@@ -27341,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;
@@ -27469,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;
@@ -27617,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;
@@ -27717,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;
 }
@@ -27731,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;
 }
@@ -27757,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;
 }
@@ -27782,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 {
@@ -27793,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;
 }
@@ -27821,18 +27810,117 @@ 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 .k-state-selected td {
+  background-color: var(--colorsSurfacePrimarySubdued, #ecf4fd);
+}
+.Table.k-grid .k-state-selected:hover td {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
+.Table.k-grid tr.k-alt {
+  background-color: var(--colorsSurfaceGreySubdued, #f7f7f7);
+}
+.Table.k-grid tr.k-alt:hover {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid:not(.Table--striped) .k-alt,
+.Table.k-grid:not(.Table--striped) .k-grid-content-sticky td {
+  background-color: transparent;
+}
+.Table.k-grid:not(.Table--striped) .k-alt:hover,
+.Table.k-grid:not(.Table--striped) .k-grid-content-sticky td:hover {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.Table.k-grid:not(.Table--striped) .k-master-row:not(:hover) {
+  background: transparent;
+}
+.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 tbody tr.k-state-hover,
+.Table.k-grid tbody tr:hover {
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+}
+.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;
 }
@@ -27852,7 +27940,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;
@@ -28102,7 +28190,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;
@@ -28243,7 +28331,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;
@@ -28257,7 +28345,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;
@@ -28347,7 +28435,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;
@@ -28423,7 +28511,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;
@@ -28455,7 +28543,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);
@@ -28544,7 +28632,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;
 }
@@ -28653,7 +28741,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;
@@ -28764,7 +28852,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;
 }