@servicetitan/design-system 11.4.1 → 11.4.2

package/dist/components/index.css

@@ -17,7 +17,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);
@@ -152,7 +152,7 @@ span.Popover {
 
 .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;
@@ -247,7 +247,7 @@ span.Popover {
 
 .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;
@@ -368,7 +368,7 @@ span.Popover {
 /* 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;
 }
@@ -460,7 +460,7 @@ span.Popover {
 
 .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;
@@ -647,7 +647,7 @@ span.Popover {
 
 .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;
@@ -720,7 +720,7 @@ span.Popover {
 /** @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;
@@ -742,7 +742,7 @@ span.Popover {
 .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;
@@ -768,7 +768,7 @@ span.Popover {
 
 .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;
@@ -880,8 +880,8 @@ span.Popover {
 }
 
 .Banner__close.a-Icon {
+  align-self: baseline;
   color: var(--colorsTextDefault, #141414);
-  cursor: pointer;
   font-size: 1.2em;
   margin-left: 24px;
   margin-top: 6px;
@@ -889,7 +889,7 @@ span.Popover {
 
 .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;
@@ -915,7 +915,7 @@ span.Popover {
 
 .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;
@@ -964,7 +964,7 @@ span.Popover {
 
 .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;
@@ -1436,7 +1436,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);
@@ -1667,7 +1667,7 @@ button.Button--full {
 
 .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;
@@ -1874,7 +1874,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;
 }
@@ -1890,7 +1890,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;
@@ -1949,7 +1949,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;
@@ -2000,7 +2000,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;
@@ -2059,7 +2059,7 @@ button.Button--full {
 /* stylelint-disable-line */
 .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;
@@ -2091,7 +2091,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;
@@ -2160,7 +2160,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: min-content;
@@ -2213,7 +2213,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);
@@ -2226,7 +2226,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;
@@ -2335,7 +2335,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);
@@ -2424,7 +2424,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;
@@ -2449,7 +2449,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;
 }
@@ -2460,7 +2460,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;
@@ -2530,7 +2530,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;
@@ -2795,7 +2795,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;
 }
@@ -2879,7 +2879,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;
@@ -3013,7 +3013,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;
@@ -3043,7 +3043,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;
@@ -8552,7 +8552,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;
@@ -8577,7 +8577,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 {
   backface-visibility: hidden;
   color: inherit;
   display: inline-block;
@@ -8589,7 +8601,8 @@ button.Button--full {
   vertical-align: middle;
   width: auto;
 }
-.a-Icon svg {
+.a-Icon svg,
+button.a-Icon svg {
   vertical-align: bottom;
 }
 
@@ -8791,7 +8804,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;
@@ -8959,7 +8972,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 {
@@ -8975,14 +8988,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;
@@ -9023,6 +9037,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;
 }
@@ -9097,7 +9114,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);
@@ -9273,7 +9290,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);
@@ -9363,7 +9380,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;
@@ -9527,7 +9544,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;
 }
@@ -9685,7 +9702,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);
@@ -10051,7 +10068,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;
@@ -10152,7 +10169,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;
@@ -10379,7 +10396,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;
@@ -10663,7 +10680,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;
@@ -10804,7 +10821,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;
@@ -10883,7 +10900,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;
   animation: snackbarIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -11255,7 +11272,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;
@@ -11365,7 +11382,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;
@@ -11510,7 +11527,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;
@@ -11610,7 +11627,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;
 }
@@ -11624,17 +11641,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;
 }
@@ -11650,17 +11656,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;
 }
@@ -11675,7 +11670,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 {
@@ -11686,12 +11681,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;
 }
@@ -11708,18 +11697,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;
 }
@@ -11739,7 +11827,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;
@@ -11989,7 +12077,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;
@@ -12130,7 +12218,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;
@@ -12144,7 +12232,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;
@@ -12222,7 +12310,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;
@@ -12294,7 +12382,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;
@@ -12326,7 +12414,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);
@@ -12415,7 +12503,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;
 }
@@ -12524,7 +12612,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;
@@ -12635,7 +12723,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;
 }